Button

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.

Do place primary actions on the rightmost position when grouping Buttons (opposite for RTL languages)

Avoid placing primary actions on the left of other Buttons

Do use text labels to provide context.

Avoid using icon only Buttons when the icon's action is unclear.

Recommendations

In cases where the component is loading and interaction should not be supported, such as a click event, use both the loading and disabled attributes. While the loading attribute provides context the component is loading - interaction is not prevented. To display a loading state and disable interaction, use both attributes with one another.

Accessibility

Icons

Buttons can be used without text, when supplied with an icon or icons that represent actions a user can take, when accompanied with an label attribute to provide context to assistive technologies:

Use dark colors for code blocksCopy
<calcite-button icon-start="folder-plus" label="Add new folder"></calcite-button>

Links

If adding a link to the component with the href attribute, it is strongly recommended to use a unique identifier with the label attribute to distinguish individual links.

Different identifiers are important to distinguish where multiple instances are present so users can navigate through the application's links effectively. The label's context provides a purpose to assistive technologies and a larger audience. For instance:

Use dark colors for code blocksCopy
<p>Null Island</p>
<calcite-button
    href="https://www.arcgis.com/apps/mapviewer/index.html?marker=0;0;4326;Null Island;;&center=0;0&level=6"
    icon-end="launch"
    label="Open Null Island in map"
    target="_blank">
Open in map
</calcite-button>

<p>Mariana Trench</p>
<calcite-button
    href="https://www.arcgis.com/apps/mapviewer/index.html?marker=142.1994;11.3498;4326;Mariana Trench;;&center=142.1994;11.3498&level=6"
    icon-end="launch"
    label="Open Mariana Trench in map"
    target="_blank">
Open in map
</calcite-button>

<p>Mount Everest</p>
<calcite-button
    href="https://www.arcgis.com/apps/mapviewer/index.html?marker=86.9249;27.9886;4326;Mount Everest;;&center=86.9249;27.9886&level=6"
    icon-end="launch"
    label="Open Mount Everest in map"
    target="_blank">
    Open in map
</calcite-button>

Key	Function
`Space`	Presses the component. Note: If the `href` property is used, the component behaves like a link and can only be pressed with the `Enter` key.
`Enter`	Presses the component.
`Tab`	Moves focus in and out of the component.
`Tab` and `Shift`	Moves focus in and out of the component.