Actionsstable
Button
An accessible and customizable button that provides variants for primary, secondary, and destructive actions.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add button
When to use
Use the button whenever you need to highlight an action that the user can execute, such as submitting forms, opening dialogs, or confirming critical flows.
Combine the available variants to communicate visual priority while maintaining consistency throughout the interface.
Best practices
- Prefer short imperative verbs, such as "Save" or "Submit".
- Select the
destructivevariant only for irreversible actions. - Combine icons with text when you need to convey meaning quickly, maintaining the proportion defined in the default styles.
Accessibility
The component inherits native button attributes, including keyboard support and focus states. Make sure to provide descriptive labels through the children prop or aria-label attribute when using icons alone.
Focus states are visible thanks to the utility classes defined in buttonVariants; customize them according to your design system guidelines.
Examples
Combine variants and sizes to meet your needs.
Default variants
Demonstration of available variants to communicate action hierarchy.
With icon
Use icons to reinforce context when space is limited.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'default' | Defines the visual style of the button. Use the variant that best communicates the importance of the action. |
size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | Controls the internal spacing and height of the button, allowing adaptations for toolbars, cards, or primary CTAs. |
asChild | boolean | false | When enabled, uses Radix's slot to pass styles to the child component, useful for transforming links into styled buttons. |