FoundationsButton

Button

Buttons allow users to perform an action or to navigate to another page / view.

Prop	Type	Required	Default	Description
`block`	`boolean`	Yes	`false`	—
`borderBottomWidth`	`CSSObject['borderBottomWidth']`	—	—	—
`borderLeftWidth`	`CSSObject['borderLeftWidth']`	—	—	—
`borderRadius`	`CSSObject['borderRadius']`	—	—	—
`borderRightWidth`	`CSSObject['borderRightWidth']`	—	—	—
`borderTopWidth`	`CSSObject['borderTopWidth']`	—	—	—
`colorScheme`	`ColorScheme` `primary`\|`secondary`\|`tertiary`\|`critical`	Yes	—	—
`disabled`	`boolean`	—	—	—
`fontWeight`	`number`	—	—	—
`hasIcon`	`boolean`	Yes	—	—
`isIcon`	`boolean`	Yes	—	—
`loading`	`boolean`	—	—	—
`size`	`Size` `xsmall`\|`small`\|`medium`\|`large`	Yes	—	—
`variant`	`Variant` `filled`\|`outline`\|`text`	Yes	—	—

Prop	Type	Required	Default	Description
`block`	`boolean`	—	`false`	When true, the button will fill the available width of its container.
`borderBottomWidth`	`CSSObject['borderBottomWidth']`	—	—	—
`borderLeftWidth`	`CSSObject['borderLeftWidth']`	—	—	—
`borderRadius`	`CSSObject['borderRadius']`	—	—	Props to manipulate the border in detail.
`borderRightWidth`	`CSSObject['borderRightWidth']`	—	—	—
`borderTopWidth`	`CSSObject['borderTopWidth']`	—	—	—
`children`	`ReactNode`	—	—	—
`colorScheme`	`ColorScheme` `primary`\|`secondary`\|`tertiary`\|`critical`	—	`primary`	Color of the button.
`data`	`DataAttributeMap`	—	—	Test id for the button
`disabled`	`boolean`	—	`false`	When true, the button will be disabled.
`iconAfter`	`ComponentType<IconProps>`	—	—	An element rendered after the button content.
`iconBefore`	`ComponentType<IconProps>`	—	—	An element rendered before the button content.
`label`	`string`	Yes	—	—
`loading`	`boolean`	—	`false`	When true, the button will display a loading spinner.
`size`	`Size` `xsmall`\|`small`\|`medium`\|`large`	—	`medium`	The size of the button.
`type`	`submit`\|`button`\|`reset`	—	—	Provide an alternate type if the button is within a form.
`variant`	`Variant` `filled`\|`outline`\|`text`	—	`filled`	Style of the button.

Button — Guidelines

What buttons communicate, when to use SplitButton instead, and how to choose colorScheme, variant and icons.

ButtonDeprecated

Buttons allow users to perform an action or to navigate to another page / view.