A button component used to trigger an action.
| Prop (Props) | Type | Default | Description |
|---|---|---|---|
appearance | 'primary' | 'secondary' | 'outline' | 'subtle' | 'transparent' | 'secondary' | Appearance variant; primary is the primary action filled with the brand color |
size | 'small' | 'medium' | 'large' | 'medium' | Size, with heights of 24 / 32 / 40 px respectively |
shape | 'rounded' | 'circular' | 'square' | 'rounded' | Shape; circular uses borderRadiusCircular, square has sharp corners |
disabled | boolean | false | Whether the button is disabled |
selected | boolean | false | Selected state (toggle-button mode), rendered as aria-pressed |
block | boolean | false | Block display, fills the full width of the parent container |
type | 'button' | 'submit' | 'reset' | 'button' | Native type; button is the explicit default to avoid accidental form submission |
icon | Component | — | Icon component (an icon from @fluere-vue/icons), decorative and hidden from AT |
iconPosition | 'before' | 'after' | 'before' | Icon position relative to the text (only takes effect in icon + text mode) |
iconOnly | boolean | false | Show only the icon (compact, square mode); the content <span> is not rendered |
| Slot (Slots) | Description |
|---|---|
default | Button text; not rendered when iconOnly is true |
icon | Icon slot; when provided it replaces the icon Prop (the icon gets aria-hidden="true") |
This component does not declare
emitsand does not setinheritAttrs: false: events such asclickand attributes such asaria-*,id, andtitlefall through directly to the root native<button>, so consumers can use them as they would with a native button. This is also why consumers must passaria-labelthemselves in theiconOnlyscenario — the icon is invisible to the accessibility tree, so the accessible name can only come from outside.