BrandButton
The BrandButton component renders a branded pressable for any platform in the brand icon registry.
Source
LLM docs
Package
npm install @plocks/brandsExamples
3
Properties
60
Playground
Basics
Basic Button usage with a title prop.
Loading demo…
import { BrandButton } from '@plocks/brands';
export function Demo() {
return (
<BrandButton
brand="google"
title="Continue with Google"
/>
);
}App Store Badges
Built in support for App Store badges
Loading demo…
import { BrandButton } from '@plocks/brands';
import { Flex } from '@plocks/ui';
export function Demo() {
return (
<Flex>
<BrandButton
brand="app-store"
primaryText="Download on the"
secondaryText="App Store"
/>
<BrandButton
brand="google-play"
primaryText="Get it on"
secondaryText="Google Play"
/>
</Flex>
);
}Variants
Compare the plain brand treatment with Button-style visual variants.
Loading demo…
import { Column } from '@plocks/ui';
import { BrandButton } from '@plocks/brands';
const variants = ['plain', 'default', 'filled', 'light', 'outline', 'ghost'] as const;
export function Demo() {
return (
<Column gap="sm" align="flex-start">
{variants.map(variant => (
<BrandButton key={variant} brand="google" title={`Continue with Google · ${variant}`} variant={variant} />
))}
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources