Button
Primary action. Variants, tones and sizes.
Usage
Import the component and use it. No setup, no config — it ships fully styled.
Variants
Four visual treatments via the variant prop.
Colors
Semantic tones, all driven by --sve-* tokens.
Sizes
Three sizes from the size prop.
States
Disabled is fully styled and non-interactive. Icons compose inline.
Props
Plus every native <button> attribute via prop spreading.
| Prop | Type | Default |
|---|---|---|
variant | 'solid' | 'outline' | 'ghost' | 'flat' | 'solid' |
color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'default' |
size | 'sm' | 'md' | 'lg' | 'md' |
disabled | boolean | false |
onclick Standard click handler. | (e: MouseEvent) => void | — |
class Extra classes merged onto the root. | string | — |
children Button label / content. | Snippet | — |