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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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 colorUsage
BlueFor the primary call-to-action on a view. Avoid using multiple call-to-action Buttons on a page.
RedThe red Button should be used to indicate potentially destructive or unrecoverable actions.
NeutralUseful when you need a subdued non-primary action.
InverseHigh contrast for non-destructive, non brand color actions.
Button appearanceUsage
SolidFor primary actions. Solid Buttons draw more attention than other variants.
ClearTo be used for secondary actions. Consists of text and a border with no foreground fill.
OutlineTo be used for secondary actions. Consists of text and a border with a foreground fill.
TransparentNo foreground fill or border designed to be used for non-critical actions.

Placement

Place primary Buttons in the leading position:

Toggle preview themeToggle preview direction

If there are three Buttons, use this order:

Toggle preview themeToggle preview direction
Do Button Order and Size
Do place primary actions on the rightmost position when grouping Buttons (opposite for RTL languages).
Avoid Button Order and Size
Avoid placing primary actions on the left of other Buttons.
Do Button Icons
Do prefer icon Buttons with text when there is space for it.
Avoid Button Icons
Avoid using icon Buttons when the context is unclear.

Accessibility

Keyboard navigation

KeyFunction
SpacePress button
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component

Writing and copy

Do Button Writing
Do use sentence case for Button text.
Avoid Button Writing
Avoid using title case for Button, and avoid using punctuation.
Do Button Actionable
Do make Button text actionable.
Avoid Button Actionable
Avoid making Button text unclear.
Do Button Concise
Do make Button text concise.
Avoid Button Concise
Avoid making Button text long or difficult to read, and avoid making Button text specific to a selection.

API reference

calcite-button
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
alignmentalignment

optionally specify alignment of button elements.

optional
typedChoose from a set of typed values
center (default)endicon-end-space-betweenicon-start-space-betweenspace-betweenstart
appearanceappearance

specify the appearance style of the button, defaults to solid.

typedChoose from a set of typed values
clearoutlinesolid (default)transparent
colorcolor

specify the color of the button, defaults to blue

typedChoose from a set of typed values
blue (default)inverseneutralred
disableddisabled

is the button disabled

booleanA boolean property should be present, or not
truefalse
formform
deprecated– this property is no longer needed if placed inside a form.

The form ID to associate with the component

optional
stringA custom string
undefined
hrefhref

optionally pass a href - used to determine if the component should render as a button or an anchor

optional
stringA custom string
undefined
iconEndicon-end

optionally pass an icon to display at the end of a button - accepts calcite ui icon names

optional
iconAccepts a Calcite UI Icon string
iconFlipRtlicon-flip-rtl

flip the icon(s) in rtl

optional
typedChoose from a set of typed values
bothendstart
iconStarticon-start

optionally pass an icon to display at the start of a button - accepts calcite ui icon names

optional
iconAccepts a Calcite UI Icon string
intlLoadingintl-loading

string to override English loading text

optional
stringA custom string
"Loading" (default)
labellabel

Applies to the aria-label attribute on the button or hyperlink

optional
stringA custom string
undefined
loadingloading

optionally add a calcite-loader component to the button, disabling interaction.

booleanA boolean property should be present, or not
truefalse
namename

The name attribute to apply to the button

optional
stringA custom string
undefined
relrel

The rel attribute to apply to the hyperlink

optional
stringA custom string
undefined
roundround

optionally add a round style to the button

booleanA boolean property should be present, or not
truefalse
scalescale

specify the scale of the button, defaults to m

typedChoose from a set of typed values
lm (default)s
splitChildsplit-child

is the button a child of a calcite-split-button

optional
typedChoose from a set of typed values
primarysecondary
targettarget

The target attribute to apply to the hyperlink

optional
stringA custom string
undefined
typetype

The type attribute to apply to the button

stringA custom string
"button" (default)
widthwidth

specify the width of the button, defaults to auto

typedChoose from a set of typed values
auto (default)fullhalf

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding text.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.