Button

Buttons let users trigger actions or events with a single click, or by pressing Enter or Space while the button has focus.

OverviewPropertiesUsage

Import

import { Button } from '@dynatrace/strato-components/buttons';

Use cases

CodeSandbox

Add label and icons

Buttons can consist of a label, a prefix icon, and a suffix icon. Buttons should always use a label unless the icon displayed is universally understood and accessible. If a button uses only an icon, it should be placed in the prefix or suffix slot and have an aria-label applied.

It's advised to only use the aria-label if the button has no readable content, like when it only has an icon. In that case, the aria-label needs to be used to make the item accessible.

CodeSandbox

Change the Button variant

Use the variant prop to create the different contextual button variants. When no variant is specified, it's set to default.

CodeSandbox

Change the Button color

By default, the button has the color neutral. You should always consider the meaning behind the colors when changing this.

CodeSandbox

Disable the Button

The disabled prop disables a button, applying the native disabled attribute to the button element.

CodeSandbox

To make the button more accessible, use aria-disabled instead. This doesn't apply the disabled attribute to the native button. The aria-disabled attribute only semantically disables the button, but it's still focusable, clickable, and registered events will still be triggered. This enables visually impaired users to focus the button and have it announced by a screen reader. You need to handle events yourself to prevent triggering unintended actions when the button is aria-disabled.

To provide more information about why the button is disabled, add an aria-label or aria-describedby attribute.

CodeSandbox

Try to use disabled buttons as rarely as possible, especially in forms. Disabled buttons provide little feedback, making it hard to know why they aren't usable. Instead, let the users submit the form, but prevent the submission and provide appropriate error messages.

To provide a visual indicator of why the button is disabled, we recommend adding additional content next to the button, as in the example above, but you can also use a tooltip.

CodeSandbox

Change the Button width

The button is as wide as its content by default. When the prop is set to full, it takes the width of its parent container. The width prop also supports any CSS width value.

CodeSandbox

Change the Button size

The size of the button can be changed with the size prop. It supports two different sizes, default and condensed.

CodeSandbox

Change the text alignment within the Button

By default, the text content is centered inside a button. The alignment can be changed by setting the textAlign prop to start. This only affects the button if its width is set to any value bigger than the button content.

CodeSandbox

Set the loading state

You can set the Button state to loading by adding the prop loading. By default, it's set to false, so the button contents are shown. If true, it shows an indeterminate ProgressCircle, styled depending on the color and variant props. You also can't interact with the button, which acts as disabled while loading is true and doesn't fire any trigger events.

CodeSandbox