Button
A flexible interactive button element supporting variants, sizes, icons, loading state, and full-width layout.
Source
LLM docs
Package
Examples
8
Properties
55
Playground
Basics
Label a button with
title (or children) and pass onPress to run its action.Loading demo…
import { Button } from '@plocks/ui';
export function Demo() {
return <Button title="Launch mission" />;
}Colors
Pair
color with a color-bearing variant (filled, light, subtle, outline, gradient) to align actions with brand intent. The default variant is neutral chrome and ignores color.Loading demo…
import { Button, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap">
<Button variant="filled" color="primary">Primary</Button>
<Button variant="filled" color="secondary">Secondary</Button>
<Button variant="filled" color="success">Success</Button>
<Button variant="filled" color="warning">Warning</Button>
<Button variant="filled" color="error">Error</Button>
</Row>
);
}Loading state
Set
loading to swap the label for a spinner and block presses. Add loadingTitle to keep text beside the spinner.Loading demo…
import { Button, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap">
<Button loading>Submit application</Button>
<Button loading loadingTitle="Submitting…">
Submit application
</Button>
</Row>
);
}Variants
Preview the available button variants to match the desired emphasis level.
Loading demo…
import { Button, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap">
<Button variant="default">Default</Button>
<Button variant="filled">Filled</Button>
<Button variant="light">Light</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="gradient">Gradient</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="none">Text only</Button>
</Row>
);
}Sizes
Preview the available button size tokens for different density requirements.
Loading demo…
import { Button, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap" align="flex-end">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>
</Row>
);
}Localized labels
Switch locales at runtime and render translated button copy with
useI18n helpers.Loading demo…
import { Button, Flex, Select, useI18n } from '@plocks/ui';
const LOCALES = [
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
{ label: 'Français', value: 'fr' },
];
export function Demo() {
const { t, locale, setLocale } = useI18n();
return (
<Flex>
<Select
options={LOCALES}
value={locale}
onChange={(value) => { if (value) setLocale(value); }}
/>
<Button title={t('button.demo.submit')} />
</Flex>
);
}Tooltips
Add contextual hints to buttons with
tooltip and optional placement overrides.Loading demo…
import { Button, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap">
<Button tooltip="Save your current work.">Save</Button>
<Button tooltip={{ label: 'Permanently delete this item.', position: 'bottom' }}>
Delete
</Button>
<Button tooltip={{ label: 'Download the file to your device.', position: 'left' }}>
Download
</Button>
<Button tooltip={{ label: 'Get help and support resources.', position: 'right' }}>
Help
</Button>
</Row>
);
}Width
Buttons hug their label by default. Set
w to a pixel or percentage width, or fullWidth to fill the container.Loading demo…
import { Block, Button } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Button>Default width</Button>
<Button w={200}>Fixed width (200)</Button>
<Button w="50%">Half width (50%)</Button>
<Button fullWidth>Full width</Button>
</Block>
);
}Further reading
React Native design for iOS, Android, and Web.
Quick Links
Resources