Button
A button triggers an action or event when activated and supports three visual appearances: accent, standard, and subtle.
Usage
<script>
import { Button } from 'fluentui-svelte';
</script>
<Button>I am a Button</Button>Shape
A button can be rounded, circular, or square. Default: rounded.
Appearance
A button can have its content and borders styled for greater emphasis or to be subtle.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
ref bindable | ButtonElementDOMType[T] | The DOM reference of the button element. | |
as | 'button' | 'a' | 'div' | 'button' | The DOM element to render. |
disabled | boolean | Disables the user interaction. | |
shape | 'circular' | 'rounded' | 'square' | 'rounded' | A button can be rounded, circular, or square. |
appearance | 'accent' | 'standard' | 'subtle' | 'accent' | A button can have its content and borders styled for greater emphasis or to be subtle. |
disabledFocusable | boolean | false | When set, allows the button to be focusable even when it has been disabled. |
isMenuButton | boolean | Add an icon that indicates the button triggers a menu. | |
indicatorPosition | 'before' | 'after' | 'after' | Position of the menu indicator relative to the button content. |
indicatorIcon | Snippet | Component | The icon used to indicate the button triggers a menu. | |
| HTML Attributes |
Split Button
A split button is a special type of button that combines a standard button with a menu button to provide users with a primary action and additional options.
Usage
<script>
import { SplitButton } from 'fluentui-svelte';
</script>
<SplitButton menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton appearance="standard" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton appearance="subtle" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton shape="circular" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton shape="circular" appearance="standard" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton shape="circular" appearance="subtle" menuTriggerProps={{ 'aria-label': 'More options' }} />Adding a Menu
To add a menu to the split button, please refer to the Menu documentation for details on how to create menus and pass them as a prop to the SplitButton component.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
appearance | 'accent' | 'standard' | 'subtle' | 'accent' | Both buttons can have their content and borders styled for greater emphasis or to be subtle. |
shape | 'circular' | 'rounded' | 'square' | 'rounded' | Both buttons can be rounded, circular, or square. |
disabled | boolean | false | Disables the user interaction on both buttons. |
primaryButtonProps | ButtonProps | The props to spread on the primary button. | |
menuTriggerProps | ButtonProps | The props to spread on the button that opens the menu. It shows only an arrow, so give it an aria-label. | |
wrapperRef bindable | HTMLDivElement | null | The DOM reference of the element wrapping both buttons. | |
primaryButtonRef bindable | HTMLButtonElement | null | The DOM reference of the primary button. | |
menuTriggerRef bindable | HTMLButtonElement | null | The DOM reference of the button that opens the menu. | |
| HTML Attributes |