Nexub DSv0.0.2
Brand
Components · Actions
Triggers an action or event. Supports multiple variants, sizes, and semantic tones.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'subtle' | 'link' | 'destructive' | 'primary' | — | Visual style of the button. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | — | Control height and padding. |
| loading | boolean | false | — | Shows a spinner and disables interaction. |
| disabled | boolean | false | — | Disables the button. |
| fullWidth | boolean | false | — | Stretches the button to fill its container. |
| leadingIcon | React.ReactNode | — | — | Icon rendered before the label. |
| trailingIcon | React.ReactNode | — | — | Icon rendered after the label. |
| tone | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | — | — | Semantic colour tone — overrides the variant colour with a semantic palette. |
| asChild | boolean | false | — | Merges props onto the immediate child element (Radix Slot). |
import { Button } from '@nexub/react';