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.

OverviewPropertiesUsage

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.
readOnly?		false	Determines whether the element is in read-only mode.

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.