Button

Buttons allow users to trigger actions or events with a single click anywhere within the button container. Users can also trigger a button by pressing Enter or Space while the button has focus.

Import

import { Button } from '@dynatrace/strato-components-preview/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

Props

ButtonProps

Signature:

export declare type ButtonProps<E extends > = <E, >;

ButtonOwnProps

extends, , , ,

Name	Type	Default	Description
disabled?		false	If a button is disabled e.g. it cannot be interacted with.
variant?		'default'	Different variants have different styles.
type?		'button'	The HTML button type.
onClick?		-	Called when the button is interacted with.
width?	| ..< & {}>	'content'	The width of the button.
color?		'neutral'	The color of the button. This should be chosen based on the context the button is used in.
textAlign?		'center'	Controls the text alignment inside the button. Only affects the button if the width is not set to 'content'.
size?		'default'	The size of the button.
loading?		false	The current loading state of the button. If true, a loading icon is shown and the button is disabled.

Button.Label

You can use the Button.Label component to render any custom label. If you pass a text-based label, overflowing text would get truncated. If you don't use the Label component and just add your label as the Button child, it gets added internally.

ButtonLabelProps

extends,

Name	Type	Default	Description
children		-	Elements to be displayed in the Button Label slot.

Button.Prefix

You can use the Button.Prefix component to render content (e.g. an icon) right before the button label, as shown above.

ButtonPrefixProps

extends,

Name	Type	Default	Description
children		-	Elements to be displayed in the Button Prefix slot.

Button.Suffix

You can use the Button.Suffix component to render content (e.g. an icon) right after the button label, as shown above.

ButtonSuffixProps

extends,

Name	Type	Default	Description
children	.	-	Elements to be displayed in the Button Suffix slot.