Button

this is a button

You can provide a single function child that will be called with 'hover' and 'focus' keys. This allows you to customize the rendering of the Button in those cases.

Example

Active:

Example

Color:

Example

Icon:

<Button icon={<Close />} onClick={() => {}} />

Label:

Example

Primary:

Example

Reverse:

<Button reverse icon={<Edit />} label="Edit" onClick={() => {}} />

Props:

Prop NameValuesRequiredDefault ValueDescription
active
truefalse
optional
false
Whether the button is active.
color
custom
optional
'brand'
Fill color for primary, label color for plain, border color otherwise.
disabled
truefalse
optional
false
Whether the button is disabled.
fill
'horizontal''vertical'bool
optional
false
Whether the button expands to fill all of the available width and/or height.
focusIndicator
truefalse
optional
true
Whether when 'plain' it should receive a focus outline.
hoverIndicator
custom
optional
false
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
optional
'#'
If specified, the button will behave like an anchor tag.
target
'_self''_blank''_parent''_top'
optional
'self'
Specifies where to display the URL defined in the href property.
icon
element
optional
[]
Icon element to place in the button.
gap
'none''xxsmall''xsmall''small''medium''large''xlarge'string
optional
'small'
The amount of spacing between icon and label in the button.
label
node
optional
'Text'
Label text to place in the button.
onClick
function
optional
() => {}
Click handler. Not setting this property and not specifying a href causes the Button to be disabled.
plain
truefalse
optional
false
Whether this is a plain button with no border or pad. Non plain button will show both pad and border. The plain button has no border and unless the icon prop exist it has no pad as well
primary
truefalse
optional
false
Whether this is a primary button. There should be at most one per page or screen.
reverse
truefalse
optional
false
Whether an icon and label should be reversed so that the icon is at the end of the anchor.
type
'button''reset''submit'
optional
'button'
The type of button. Set the type to submit for the default button on forms.
as
stringfunc
optional
'button'
The DOM tag or react component to use for the element.