BrandButton

The BrandButton component renders a branded pressable for any platform in the brand icon registry. By default it's a single-line button supporting variants, sizes, icons, loading state, and full-width layout. Pass primaryText and secondaryText instead of title and it renders the two-line store-badge layout ("Download on the / App Store").

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁶⁾

Properties

⁽⁵⁷⁾

Playground

BrandButton

Basic Button usage with a title prop.

Loading demo…

import
 
{
 
BrandButton
,
 useToast 
}
 
from
 
'@platform-blocks/react-ui-library'
;
export
 
function
 
Demo
(
)
 
{
  
const
 toast 
=
 
useToast
(
)
  
return
 
<BrandButton
   
title
=
"Click Me"
 
  
brand
=
"facebook"
    
onPress
=
{
(
)
 
=>
 toast
.
warn
(
{
 
      title
:
 
'What the Zuck!'
,
      message
:
 
'This is a Facebook brand button'
,
      position
:
 
'top-center'
    
}
)
}
  
/>
}

BrandButton

Basic Button usage with a title prop.

Loading demo…

import
 
{
 
BrandButton
,
 
Card
,
 
Flex
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
      
<Flex
 
direction
=
"column"
 
gap
=
"lg"
>
        
<Text
 
variant
=
"h6"
>
Brand
 
Icon
 
Color
 
Override
</Text
>
        
<Text
 
variant
=
"p"
 
color
=
"secondary"
>
          
Use
 the color prop to override 
default
 brand colors with a single color
        
</Text
>
        
        
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
          
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Default
 
Colors
:
</Text
>
          
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
            
<BrandButton
 
brand
=
"google"
 
title
=
"Google"
 
/>
            
<BrandButton
 
brand
=
"github"
 
title
=
"GitHub"
 
/>
            
<BrandButton
 
brand
=
"spotify"
 
title
=
"Spotify"
 
/>
            
<BrandButton
 
brand
=
"microsoft"
 
title
=
"Microsoft"
 
/>
          
</Flex
>
        
</Flex
>
 
        
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
          
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Custom
 
Color
 
(
#
666666
)
:
</Text
>
          
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
            
<BrandButton
 
brand
=
"google"
 
title
=
"Google"
 
color
=
"#666666"
 
/>
            
<BrandButton
 
brand
=
"github"
 
title
=
"GitHub"
 
color
=
"#666666"
 
/>
            
<BrandButton
 
brand
=
"spotify"
 
title
=
"Spotify"
 
color
=
"#666666"
 
/>
            
<BrandButton
 
brand
=
"microsoft"
 
title
=
"Microsoft"
 
color
=
"#666666"
 
/>
          
</Flex
>
        
</Flex
>
 
        
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
          
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Red
 
Override
 
(
#
E53E3E
)
:
</Text
>
          
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
            
<BrandButton
 
brand
=
"google"
 
title
=
"Google"
 
color
=
"#E53E3E"
 
/>
            
<BrandButton
 
brand
=
"github"
 
title
=
"GitHub"
 
color
=
"#E53E3E"
 
/>
            
<BrandButton
 
brand
=
"spotify"
 
title
=
"Spotify"
 
color
=
"#E53E3E"
 
/>
            
<BrandButton
 
brand
=
"microsoft"
 
title
=
"Microsoft"
 
color
=
"#E53E3E"
 
/>
          
</Flex
>
        
</Flex
>
 
        
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
          
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Outline
 
Variant
 with 
Color
 
Override
:
</Text
>
          
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
            
<BrandButton
 
brand
=
"google"
 
title
=
"Google"
 
variant
=
"outline"
 
color
=
"#8B5CF6"
 
/>
            
<BrandButton
 
brand
=
"github"
 
title
=
"GitHub"
 
variant
=
"outline"
 
color
=
"#8B5CF6"
 
/>
            
<BrandButton
 
brand
=
"spotify"
 
title
=
"Spotify"
 
variant
=
"outline"
 
color
=
"#8B5CF6"
 
/>
            
<BrandButton
 
brand
=
"microsoft"
 
title
=
"Microsoft"
 
variant
=
"outline"
 
color
=
"#8B5CF6"
 
/>
          
</Flex
>
        
</Flex
>
 
      
</Flex
>
  
)
;
}

Universal Props Demo

These components demonstrate universal props like lightHidden and darkHidden that work across the entire library. Toggle dark/light mode or resize the window.

Loading demo…

import
 
{
 
Block
,
 
BrandButton
,
 
Flex
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
        
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Light
 
Mode
 
Only
 
(
darkHidden
)
:
</Text
>
        
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
          
<BrandButton
 
brand
=
"google"
 
title
=
"Google"
 darkHidden 
/>
          
<BrandButton
 
brand
=
"github"
 
title
=
"GitHub"
 darkHidden 
/>
        
</Flex
>
      
</Flex
>
 
      
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
        
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Dark
 
Mode
 
Only
 
(
lightHidden
)
:
</Text
>
        
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
          
<BrandButton
 
brand
=
"spotify"
 
title
=
"Spotify (Dark Only)"
 lightHidden 
/>
          
<BrandButton
 
brand
=
"microsoft"
 
title
=
"Microsoft (Dark Only)"
 lightHidden 
/>
        
</Flex
>
      
</Flex
>
 
      
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
        
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Responsive
 
Visibility
:
</Text
>
        
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
          
<BrandButton
 
brand
=
"apple"
 
title
=
"Hidden on Large+"
 
hiddenFrom
=
{
1024
}
 
/>
          
<BrandButton
 
brand
=
"amazon"
 
title
=
"Visible on Medium+"
 
visibleFrom
=
{
768
}
 
/>
        
</Flex
>
      
</Flex
>
 
      
<Flex
 
direction
=
"column"
 
gap
=
"md"
>
        
<Text
 
variant
=
"small"
 
weight
=
"600"
>
Combined
 
Props
:
</Text
>
        
<Flex
 
direction
=
"row"
 
gap
=
"sm"
 
wrap
=
"wrap"
>
          
<BrandButton
            
brand
=
"discord"
            
title
=
"Dark + Large Screen Only"
            lightHidden
            
visibleFrom
=
{
1024
}
          
/>
        
</Flex
>
      
</Flex
>
    
</Block
>
  
)
;
}

Store badges

Supplying primaryText and secondaryText switches BrandButton from the single-line button to the two-line store-badge layout. Any brand in the icon registry works, and the shell defaults to black until backgroundColor says otherwise.

Loading demo…

import
 
{
 
BrandButton
,
 
Row
,
 useToast 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 toast 
=
 
useToast
(
)
;
 
  
const
 announce 
=
 
(
store
:
 
string
)
 
=>
    toast
.
info
(
{
      title
:
 
`${store} pressed`
,
      message
:
 
`Wire onPress up to Linking.openURL with your ${store} listing.`
,
      autoHide
:
 
3000
,
    
}
)
;
 
  
return
 
(
    
<Row
 
gap
=
"md"
 
wrap
=
"wrap"
 
justify
=
"center"
 
align
=
"center"
>
      
{
/* Passing primaryText/secondaryText switches BrandButton to the badge layout. */
}
      
<BrandButton
        
brand
=
"app-store"
        
primaryText
=
"Download on the"
        
secondaryText
=
"App Store"
        
onPress
=
{
(
)
 
=>
 
announce
(
'App Store'
)
}
      
/>
 
      
<BrandButton
        
brand
=
"google-play"
        
primaryText
=
"Get it on"
        
secondaryText
=
"Google Play"
        
onPress
=
{
(
)
 
=>
 
announce
(
'Google Play'
)
}
      
/>
 
      
{
/* Badges default to a black shell whatever the brand — `backgroundColor` opts one out. */
}
      
<BrandButton
        
brand
=
"spotify"
        
primaryText
=
"Listen on"
        
secondaryText
=
"Spotify"
        
backgroundColor
=
"#1DB954"
        
onPress
=
{
(
)
 
=>
 
announce
(
'Spotify'
)
}
      
/>
    
</Row
>
  
)
;
}

Badge sizes

Every badge metric — padding, icon, radius, height — is derived from the size token's headline type, so the proportions hold from xs through 3xl.

Loading demo…

import
 
{
 
BrandButton
,
 
Block
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
align
=
"flex-end"
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
size
}
 
align
=
"center"
 
gap
=
"xs"
>
          
<BrandButton
            
brand
=
"app-store"
            
primaryText
=
"Download on the"
            
secondaryText
=
"App Store"
            
size
=
{
size
}
          
/>
          
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
            
{
size
}
          
</Text
>
        
</Block
>
      
)
)
}
    
</Row
>
  
)
;
}

Badge colors

Override the badge shell with backgroundColor, textColor, and borderColor to match your brand or design requirements.

Loading demo…

import
 
{
 
BrandButton
,
 
Block
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
direction
=
"row"
>
      
<BrandButton
        
brand
=
"github"
        
primaryText
=
"View on"
        
secondaryText
=
"GitHub"
        
backgroundColor
=
"#ffffff"
        
textColor
=
"#24292e"
        
borderColor
=
"#24292e"
        
onPress
=
{
(
)
 
=>
 console
.
log
(
'GitHub light pressed'
)
}
      
/>
      
<BrandButton
        
brand
=
"spotify"
        
primaryText
=
"Listen on"
        
secondaryText
=
"Spotify"
        
backgroundColor
=
"#191414"
        
textColor
=
"#1DB954"
        
borderColor
=
"#1DB954"
        
onPress
=
{
(
)
 
=>
 console
.
log
(
'Spotify custom pressed'
)
}
      
/>
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap