Button
A flexible button component with multiple variants and sizes, following the design system.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | ButtonVariant | No | 'PrimaryFillButton' | Button style variant |
size | ButtonSize | No | 'default' | Button size |
asChild | boolean | No | false | Render as child element instead of button |
className | string | No | - | Additional CSS classes |
children | ReactNode | Yes | - | Button content |
...props | ButtonHTMLAttributes | No | - | Standard button HTML attributes |
Variants
| Variant | Description |
|---|---|
'ghost' | Transparent background, text only |
'PrimaryFillButton' | Primary purple/amethyst fill button |
'SecondaryFillButton' | Secondary gray fill button |
'OpacityButton' | Semi-transparent background |
'UnderlineButton' | Underlined text button with amethyst accent |
'ButtonContainer' | Container style with border |
'InlinePrimary' | Inline primary link style |
'InlineSecondary' | Inline secondary link style |
'link' | Simple link style |
'DocSecondaryBorder' | Documentation secondary with border |
'DocWhiteSecondary' | Documentation white secondary |
'DocsPrimaryFillButton' | Documentation primary fill |
Sizes
| Size | Description |
|---|---|
'default' | Standard height (h-10) |
'sm' | Small height (h-8) |
'lg' | Large height (h-8, wider padding) |
'icon' | Square icon button (size-9) |
Usage
import { Button } from '@/components/atoms/Button';
// Basic usage
<Button variant="PrimaryFillButton">Click me</Button>
// With size
<Button variant="SecondaryFillButton" size="sm">Small Button</Button>
// As child element (for Link components)
<Button asChild variant="PrimaryFillButton">
<Link href="/page">Go to Page</Link>
</Button>
// With custom className
<Button className="w-full" variant="PrimaryFillButton">
Full Width
</Button>Exported Utilities
buttonVariants
Function to generate button class names without rendering:
import { buttonVariants } from '@/components/atoms/Button';
const className = buttonVariants({
variant: 'PrimaryFillButton',
size: 'default',
className: 'custom-class'
});ButtonVariant and ButtonSize Types
Exported TypeScript types for type safety:
import type { ButtonVariant, ButtonSize } from '@/components/atoms/Button';Features
- Full accessibility support (ARIA labels, roles)
- Focus visible states
- Disabled states
- Icon support with automatic sizing
- Design system integration
- Type-safe variants and sizes
Notes
- Uses
cnutility for class merging - Supports all standard button HTML attributes
- When
asChildis true, merges props with child element