Button
Button
Resources
Button is an interactive component that allows the user to execute an action. Button comes in three distinct appearances: solid, bordered, and transparent. These styles provide greater choice and flexibility for establishing hierarchy and affordance within a UI. You can display a button with or without a text description or icon.
- Keep the text description short, ideally one to three words and no more than five. If you’re including an icon with the text, use no more than three words.
- For icons, use the Salt Figma icon library. If the icon you need isn’t available, follow the steps in our Creating Salt icons guide.
To allow the user to execute an action, such as “submit”, “merge” or “upload”. Buttons are typically placed in components and contexts such as dialogs, cards and forms.
When the primary action is to take the user to another page or window rather than to trigger a function. Instead, use Link.
To import Button from the core Salt package, use:
| Name | Type | Description | Default |
|---|
- Always style button text in all caps for prominence. This avoids confusion with body text or general writing.
- Never use ampersand (&) in button text to save space.
- Always use verbs that emphasize the action the button carries out. For example, use Create instead of Ok to create a profile, or Save/Discard instead of Yes/No to save changes.
- Be succinct. Avoid having more than two or three words in a button label.
- Button Pattern (https://www.w3.org/WAI/ARIA/apg/patterns/button/) W3C
- Keep the text description short, ideally one to three words and no more than five. If you’re including an icon with the text, use no more than three words.
- For icons, use the Salt Figma icon library. If the icon you need isn’t available, follow the steps in our Creating Salt icons guide.
To allow the user to execute an action, such as “submit”, “merge” or “upload”. Buttons are typically placed in components and contexts such as dialogs, cards and forms.
When the primary action is to take the user to another page or window rather than to trigger a function. Instead, use Link.
To import Button from the core Salt package, use:
| Name | Type | Description | Default |
|---|
- Always style button text in all caps for prominence. This avoids confusion with body text or general writing.
- Never use ampersand (&) in button text to save space.
- Always use verbs that emphasize the action the button carries out. For example, use Create instead of Ok to create a profile, or Save/Discard instead of Yes/No to save changes.
- Be succinct. Avoid having more than two or three words in a button label.
- Button Pattern (https://www.w3.org/WAI/ARIA/apg/patterns/button/) W3C
- Keep the text description short, ideally one to three words and no more than five. If you’re including an icon with the text, use no more than three words.
- For icons, use the Salt Figma icon library. If the icon you need isn’t available, follow the steps in our Creating Salt icons guide.
To allow the user to execute an action, such as “submit”, “merge” or “upload”. Buttons are typically placed in components and contexts such as dialogs, cards and forms.
When the primary action is to take the user to another page or window rather than to trigger a function. Instead, use Link.
To import Button from the core Salt package, use:
| Name | Type | Description | Default |
|---|
- Always style button text in all caps for prominence. This avoids confusion with body text or general writing.
- Never use ampersand (&) in button text to save space.
- Always use verbs that emphasize the action the button carries out. For example, use Create instead of Ok to create a profile, or Save/Discard instead of Yes/No to save changes.
- Be succinct. Avoid having more than two or three words in a button label.
- Button Pattern (https://www.w3.org/WAI/ARIA/apg/patterns/button/) W3C