Button
The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, or performing a data-related action.
Props
Prop | Type | Default | Description |
|---|---|---|---|
onclick | (event, state) => Promise<void> | required | Async event handler. Set state.inProgress to manage loading state. |
class | string | '' | CSS classes to apply to the button. |
overrideDefaultStyling | boolean | false | If true, removes the base fluid-button class. |
loadingPlaceholder | Snippet | undefined | Snippet to render when onclick is in progress. |
...rest | HTMLButtonAttributes | — | Standard HTML button attributes. |
Samples
Primary
0
<Button class="fluid-button-primary">Primary Button</Button>Secondary
0
<Button class="fluid-button-secondary">Secondary Button</Button>Outline
0
<Button class="fluid-button-outline">Outline Button</Button>Transparent
0
<Button class="fluid-button-transparent">Transparent Button</Button>With Icon
0
<Button class="fluid-button-primary">1
<Icon icon="mdi:github" />2
<Text type="span">GitHub</Text>3
</Button>