Button

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

OverviewPropertiesUsageAccessibility

New

Import

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

Demo

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 you make a button icon-only, place the icon in the prefix or suffix slot and add an aria-label. See the Accessibility tab for more best practices.

Change variant

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

Change color

By default, the button has the color neutral. Always consider the meaning of colors when changing this.

Disable

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

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.

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.

Change 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.

Change size

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

Change text alignment

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.

Set 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.