fun-button
Buttons trigger actions in the application by being clicked or tapped by the user.
Do use buttons for actions like ‘Edit’, ‘Save’, ‘Run’.
Do not use links for actions. Links are only for navigation.
Button types
Primary buttons
A “Primary” button should be used for the primary action on a page or dialog.
- Must always have an icon.
- Must be understandable without looking at the icon.
- The label must be capitalized.
- There should only be one primary action per page or dialog.
- Should usually be size “lg”
Secondary buttons
A “Secondary” button should be used for other major actions.
- May have an icon.
- Must be understandable without looking at the icon.
- The label must be capitalized.
Flat buttons
“Flat” buttons can be used for minor actions instead of “Secondary” buttons, where a secondary button would be too ‘noisy’ or repetitive.
Flat buttons must follow the same rules as secondary buttons.
Quiet buttons
“Quiet” buttons can be used for minor actions instead of “Flat” buttons, for situtations where many buttons would be too noisy, even with flat buttons. Quiet buttons are suitable as icon buttons in lists, for instance.
Quiet buttons must follow the same rules as secondary buttons.
Danger buttons
“Danger” buttons may only be used for confirming a desctructive action.
Read more about confirming destructive actions in the Modals pattern.
- Use the word “remove” when there is a possibility to add the thing back again, for instance when you just remove the relationship between two entities.
- Use the word “delete” when the thing is gone forever, for instance when deleting a user completely.
Icon buttons
We have no specific type for icon buttons, but they are easy to make with the existing variants. Icons buttons should be used sparingly as they can be difficult for users to understand. A common use is for repetitive actions in lists and tables.
Icon only buttons:
- Must have a tooltip.
- Should be variant
quiet.
Tooltips
To add a tooltip to a button, add content in the tooltip slot:
Busy and disabled
To prevent clicks on a button use the disabled property.
When a button is clicked, to prevent multiple clicks and indicate that
the button action is happening, use the busy property. This also disables the button.
Examples
Specifications
Properties
| Property | Attribute | Required | Description | Type | Default |
|---|---|---|---|---|---|
| busy | busy | false | If true disable the button and show that work is being done | boolean | |
| disabled | disabled | false | If true the button cannot be clicked. | boolean | |
| href | href | false | If set, the button will render using an ‘a’ element and this href | string | |
| size | size | false | Size of the button | "lg" | "md" | "sm" | 'md' |
| target | target | false | Only relevant if an href is set | string | |
| type | type | false | Passed down to the internal button element. Not relevant if ‘href’ is set | string | 'button' |
| variant | variant | false | The button style variant | "danger" | "flat" | "primary" | "quiet" | "secondary" | 'secondary' |
Slots
| Name | Description |
|---|---|
| default | the content of the button. |
| icon | Where the icon should live. |
| tooltip | If added the button will have a tooltip with this content. |
Parts
| Name | Description |
|---|---|
| button | allows custom styling of the button. |
| icon | allows extra styling of the icon. |
Dependencies
Depends on
Used by
This documentation page generated from the source at fun-button.tsx
