Button

a button

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

active

Whether the button is active.

truefalse

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

as

The DOM tag or react component to use for the element.

"string""function"

color

Fill color for primary, label color for plain, border color otherwise.

"control"

disabled

Whether the button is disabled.

truefalse

fill

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

"horizontal""vertical"truefalse

focusIndicator

Whether when 'plain' it should receive a focus outline.

truefalse

gap

The amount of spacing between icon and label in the button.

"none""xxsmall""xsmall""small""medium""large""xlarge""string"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

hoverIndicator

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.

truefalse"string""background"

{

color:

"string,"

dark:

"boolean""string,"

image:

"string,"

light:

"string,"

position:

"string,"

opacity:

"string""boolean""number""weak""medium""strong,"

repeat:

"no-repeat""repeat""string,"

size:

"cover""contain""string"

}

href

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

"//my.com/path"

icon

Icon element to place in the button.

<Add />

label

Label text to place in the button.

"Add"

<Box>...</Box>

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onClick

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

() => {}

plain

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.

truefalse

primary

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

truefalse

reverse

Whether an icon and label should be reversed so that the icon is at the end of the anchor.

truefalse

size

The possible sizes of Button, that impacts the overall Button padding, border radius, text size and line height. 'size' will not impact any icon related sizing.

"small""medium""large"

target

Specifies where to display the URL defined in the href property.

"_self""_blank""_parent""_top"

type

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

"button""reset""submit"

Theme

global.active.background.color

The background color when using active prop.

"active"

global.active.background.opacity

The value used for active button background opacity.

"medium"

global.active.color

The text color when using active prop.

{"dark": "white", "light": "black"}

global.hover.background

The background style when hovering.

{"color": "active", "opacity": "medium"}

global.hover.color

The text color when hovering.

{"dark": "white", "light": "black"}

global.edgeSize.small

The padding around an icon-only button.

"12px"

global.colors.control

The color of the border.

{"dark": "accent-1", "light": "brand"}

global.colors.brand

The light version of the border.

"#7D4CDB"

global.colors.text

The color of the text label.

{"dark": "#f8f8f8", "light": "#444444"}

text.medium.size

The font size of the text label.

"18px"

text.medium.height

The line height of the text label.

"24px"

button.border.color

The color of the border.

string | { dark: string, light: string }

button.border.radius

The corner radius.

"18px"

button.border.width

The border width.

"2px"

button.color

The color of the text label.

string | { dark: string, light: string }

button.disabled.opacity

The opacity when the button is disabled.

number

button.padding.horizontal

The horizontal padding.

"22px"

button.padding.vertical

The vertical padding.

"4px"

button.primary.color

The color of the background for primary buttons.

string | { dark: string, light: string }

button.size.small.border.radius

The border corner radius.

"18px"

button.size.small.pad.horizontal

The pad

"20px"

button.size.small.pad.vertical

The pad

"4px"

button.size.medium.border.radius

The border corner radius.

"18px"

button.size.medium.pad.horizontal

The pad

"22px"

button.size.medium.pad.vertical

The pad

"4px"

button.size.large.border.radius

The border corner radius.

"24px"

button.size.large.pad.horizontal

The pad

"32px"

button.size.large.pad.vertical

The pad

"8px"

button.transition.duration

The length of time it will take for the element to transition between two states.

0.1

button.transition.properties

The CSS properties you want to add the transition to.

"color"

"background-color"

"border-color"

"box-shadow"

button.transition.timing

Describes how a transition will progress over one cycle of its duration and allowing it to change speed during its course.

"ease-in-out"

button.extend

Any additional style for the Button.

global.focus.border.color

The color around the component when in focus.

"focus"

global.control.disabled.opacity

The opacity when a component is disabled.

0.3