Skip to content
On this page

Button

A button wrapping slotted content.

Demos

Configurable

NameValue
Props
action
type
disabled
Slots
default

Selected variations

Default

Progressive

Destructive, primary

Destructive, primary, disabled

Quiet

Default, with icon

Default, quiet, with icon

Default, icon-only

WARNING

Due to the lack of a descriptive text, icon-only buttons require one of the following attributes: aria-label or aria-hidden.

The attribute aria-label has to be used on icon-only buttons to be understandable by screen reader users. Exceptions are buttons in component combinations, e.g. the button in the Combobox component, that are skipped by adding aria-hidden without negatively impacting the component's functionality.

Quiet, icon-only

Usage

Props

Prop nameDescriptionTypeValuesDefault
actionThe kind of action that will be taken on click.ButtonAction'default', 'progressive', 'destructive''default'
typeButton type. See the Design Style Guide.ButtonType'normal', 'primary', 'quiet''normal'

Events

Event namePropertiesDescription
click

Slots

NameDescriptionBindings
defaultButton content