Button

Examples

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.