Matchbox
Updated Dec 16, 2021

Button

COMPONENTS

A button is an interactive element that triggers an event or initiates an action.

Button API

color

The color of the button

TYPE
'red' | 'gray' | 'blue' | 'white'
children

The contents of the button

TYPE
React.ReactNode
as

Component to render the button as

TYPE
React.ElementType
disabled

Whether the button is disabled or not

TYPE
boolean
destructive
Deprecated

Use the color prop instead

TYPE
boolean
external

Whether the button takes you to an external url or not

TYPE
boolean
flat
Deprecated

Use the variant prop instead

TYPE
boolean
fullWidth

Whether the button is the full width of its parent

TYPE
boolean
outline
Deprecated

Use the variant prop instead

TYPE
boolean
outlineBorder
Deprecated

Use the variant prop instead

TYPE
boolean
size

The size of the button

TYPE
'default' | 'small' | 'large'
DEFAULT
"default"
submit

Whether the button is a submit button or a regular button

TYPE
boolean
to

The location the button will route to

TYPE
string
title

The title of the button

TYPE
string
variant

The button style variant

TYPE
'outline' | 'mutedOutline' | 'text' | 'filled'
DEFAULT
"filled"
loading

Replaces the button text with a loading spinner

TYPE
boolean
loadingLabel

Label for the button when loading

TYPE
string

Button System Props

CATEGORY
AVAILABLE PROPS
margin
margin
marginTop
marginRight
marginBottom
marginLeft
marginX
marginY
m
mt
mr
mb
ml
mx
my
padding
padding
paddingTop
paddingRight
paddingBottom
paddingLeft
paddingX
paddingY
p
pt
pr
pb
pl
px
py
width
width

Button.Icon API

as

Pass an icon through this prop to render it

TYPE
React.ElementType
size

Size of the icon

TYPE
number | string
DEFAULT
18
label

Adds an aria-label attribute to the icon

TYPE
string

Button.Icon System Props

CATEGORY
AVAILABLE PROPS
margin
margin
marginTop
marginRight
marginBottom
marginLeft
marginX
marginY
m
mt
mr
mb
ml
mx
my

Button.Group API

children

The contents of the button group

TYPE
React.ReactNode