Button

A button. We have a separate component from the browser base so we can style it.

Properties

accent true|false

Whether this is an accent button.

box true|false

Whether the button should support Box props. This is useful if you want your children to be a flexbox container. Default is false.

critical true|false

Whether this is a critical button.

fill true|false

Whether the button expands to fill all of the available width and height.

hoverIndicator background|{...}

Optional. The hover indicator to apply when the user is mousing over the button. An object can be also be specified for color index support: {background: 'neutral-2'}. This prop is meant to be used only with plain Buttons.

href {string}

If specified, the button will behave like an anchor tag.

icon {name}

Icon element to place in the button. See Icon.

label {string|node}

Label text to place in the button.

method push|replace

Valid only when used with path. Indicates whether the browser history should be appended to or replaced. The default is push.

onClick {function}

Click handler. Not setting this property and not specifying a path causes the Button to be disabled.

path {string}

React-router path to navigate to when clicked.

plain true|false

Whether this is a plain button with no border or padding. Use this when wrapping children that provide the complete visualization of the control. Do not use plain with label or icon properties.

primary true|false

Whether this is a primary button. There should be at most one per page or screen.

secondary true|false

Whether this is a secondary button.

type button|reset|submit

The type of button. Set the type to submit for the default button on forms. Defaults to button.