Button
Action family with seven variants, eight sizes, and compositions for icons, loading, links, and groups.
Installation
Add the component and its dependencies from the registry running on your computer.
npx shadcn@latest add https://brutallab.facilito.dev/r/button.jsonUsage
Import the component into your project and keep the source code under your control.
import { Button } from "@/components/ui/button"
export function Example() {
return <Button variant="default">Continue</Button>
}Variants
Visual options included in the component’s official API.
Sizes
Consistent sizes for different densities and hierarchy levels.
Default
The primary action in a view. Use it once per decision group.
Outline
A neutral surface with the same outline, shadow and movement as the primary button.
Secondary
A visible alternative for an important, but not primary, action.
Accent
A teal variant for a supporting action.
Ghost
A quiet action for toolbars and compact spaces.
Destructive
An irreversible or high-risk action. Clearly state what it removes.
Link
A text-like action. If it navigates elsewhere, use the As Link example.
Icon
A square icon action. aria-label is required when no text is present.
With Icon
Icons can reinforce an action before or after its label.
Rounded
A pill shape for highlighted actions without adding another variant.
Loading
A loading state that keeps text visible to explain what is happening.
Button Group
Groups related actions into a single visual silhouette.
As Link
A semantic link can adopt the button style through buttonVariants.
RTL
The composition also responds to right-to-left interfaces.
States & interaction
Appearance, behavior and keyboard checks.
Visual specimens of the primary button. Test the real states below with mouse, keyboard or touch.
4px / 0px2px / +2px0px / +4px3px / offset 3pxflat / mutedTab shows focus; Enter and Space activate. Hover reduces the shadow without changing border width. Reduced motion switches states without animation.
- Primary, secondary, accent, outline and destructive: 4px shadow; hover moves 2px with 2px shadow; pressed moves 4px with no shadow.
- Ghost changes surface on hover; link adds an underline. Disabled prevents activation. Loading also blocks the action and announces aria-busy.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | secondary | accent | outline | ghost | destructive | link | default | Defines the visual hierarchy. |
| size | xs | sm | default | lg | icon-xs | icon-sm | icon | icon-lg | default | Controls height, width, and spacing. |
| disabled | boolean | false | Disables interaction and focus. |
| loading | boolean | false | Shows a spinner, sets aria-busy and disables activation. Keep a visible label. |
| ButtonGroup.orientation | horizontal | vertical | horizontal | Arranges related actions in a row or column. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Preserves the native button element through Base UI.
Icon-only buttons require an aria-label.
For navigation, apply buttonVariants to a semantic link.
Loading states retain a visible label and aria-busy.
ButtonGroup needs an aria-label or aria-labelledby.