Button
Appearance variants
vue
<FuiButton appearance="primary">Primary</FuiButton>
<FuiButton appearance="outline">Outline</FuiButton>
<FuiButton appearance="subtle">Subtle</FuiButton>
<FuiButton appearance="transparent">Transparent</FuiButton>Size variants
vue
<FuiButton size="small">Small</FuiButton>
<FuiButton size="medium">Medium</FuiButton>
<FuiButton size="large">Large</FuiButton>Disabled state
vue
<FuiButton disabled>Disabled</FuiButton>With icon
vue
<FuiButton appearance="primary">
<svg><!-- icon --></svg>
Save
</FuiButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| appearance | primary | outline | subtle | transparent | primary | Visual style |
| size | small | medium | large | medium | Button size |
| disabled | boolean | false | Disabled state |
| as | button | a | span | button | Rendered element |