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

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, the button stays in the tab order with aria-disabled=true, and its busy state is signalled via aria-busy=true.

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.