Button
Calcite Buttons facilitate actions through an application. Priority and intent can be communicated by using different variants.
Overview
Buttons communicate actions that the user can take. It is important to note that the primary Button should be used sparingly as it utilizes the Brand color, which typically stands out in the interface. You will find Button usage guidelines in the Usage section of this documentation.
From the user experience perspective there is a difference between a Button and a Link. Buttons should be used when you are performing a task such as: “Create new,” “Submit,” “Upload,” etc. Link usage should be based on navigating to another place, such as: “View all”, "Profile", "Learn more" etc.
Usage
- User actions
Sample
Best Practices
Make sure that Button usage is consistent across your application. This will ensure that the user has a consistent experience when taking actions. Avoid using different styles for primary action Buttons.
Color and appearance
Button color | Usage |
|---|---|
| Blue | For the primary call-to-action on a view. Avoid using multiple call-to-action Buttons on a page. |
| Red | The red Button should be used to indicate potentially destructive or unrecoverable actions. |
| Neutral | Useful when you need a subdued non-primary action. |
| Inverse | High contrast for non-destructive, non brand color actions. |
Button appearance | Usage |
|---|---|
| Solid | For primary actions. Solid Buttons draw more attention than other variants. |
| Clear | To be used for secondary actions. Consists of text and a border with no foreground fill. |
| Outline | To be used for secondary actions. Consists of text and a border with a foreground fill. |
| Transparent | No foreground fill or border designed to be used for non-critical actions. |
Placement
Place primary Buttons in the leading position:
If there are three Buttons, use this order:
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Press button |
Tab | Move focus in and out of component |
Tab and Shift | Move focus in and out of component |
Writing and copy
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| alignment | alignment | optionally specify alignment of button elements. | center (default)endicon-end-space-betweenicon-start-space-betweenspace-betweenstart | |
| appearance | appearance | specify the appearance style of the button, defaults to solid. | clearoutlinesolid (default)transparent | |
| color | color | specify the color of the button, defaults to blue | blue (default)inverseneutralred | |
| disabled | disabled | is the button disabled | truefalse | |
| form | form | The form ID to associate with the component | undefined | |
| href | href | optionally pass a href - used to determine if the component should render as a button or an anchor | undefined | |
| iconEnd | icon-end | optionally pass an icon to display at the end of a button - accepts calcite ui icon names | ||
| iconFlipRtl | icon-flip-rtl | flip the icon(s) in rtl | bothendstart | |
| iconStart | icon-start | optionally pass an icon to display at the start of a button - accepts calcite ui icon names | ||
| intlLoading | intl-loading | string to override English loading text | "Loading" (default) | |
| label | label | Applies to the aria-label attribute on the button or hyperlink | undefined | |
| loading | loading | optionally add a calcite-loader component to the button, disabling interaction. | truefalse | |
| name | name | The name attribute to apply to the button | undefined | |
| rel | rel | The rel attribute to apply to the hyperlink | undefined | |
| round | round | optionally add a round style to the button | truefalse | |
| scale | scale | specify the scale of the button, defaults to m | lm (default)s | |
| splitChild | split-child | is the button a child of a calcite-split-button | primarysecondary | |
| target | target | The target attribute to apply to the hyperlink | undefined | |
| type | type | The type attribute to apply to the button | "button" (default) | |
| width | width | specify the width of the button, defaults to auto | auto (default)fullhalf |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding text. |