Button

Button Variants


The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.

Reaction Button


The reaction variant accepts any HTML Emoji or it's hexa/decimal ref (see here) as a string within the icon prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the icon prop of a reaction variant, but the default "smiley +" icon will be replaced with the named icon.

Reaction buttons also accept two additional (optional) props: count, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and highlight, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!

Button Full Width


This button is used many times for mobile or other things like cards and sidebars.

The link prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the newWindow prop (boolean), which will open the link in a new window, or by calling the target prop, which accepts _self, _blank, _parent, _top, child, or any string, allowing you to specify any link target.

Button Loading


Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading.

Button Block Content


Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a <span> element inside the button.

Button Icon Options


Icons can also be added to a button if needed. By default, the icon will be displayed on the left of the text. To display the icon on the right, use the optional prop of iconRight in react or icon_right in rails.

Button Accessibility Options

Button with ARIA
Button Additional Options


Button Size


By default button has the md size style, even if you don't explicitly pass a size prop.

Button Form Attribute



Things to Avoid

Never use more than one primary button on a page at any given time.

UI Samples using Button Kit

Get the full picture. See how this kit is used in our samples.

Available Props

Props Type Values

max_width

array
xs
sm
md
lg
xl
xxl
0
none

z_index

array
1
2
3
4
5
6
7
8
9
10

number_spacing

array
tabular

shadow

array
none
deep
deeper
deepest

line_height

array
tightest
tighter
tight
normal
loose
looser
loosest

display

array
block
inline_block
inline
flex
inline_flex
none

cursor

array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction

array
row
column
rowReverse
columnReverse

flex_wrap

array
wrap
nowrap
wrapReverse

justify_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self

array
auto
start
end
center
stretch

align_items

array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self

array
auto
start
end
center
stretch
baseline

flex

array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow

array
1
0

flex_shrink

array
1
0

order

array
1
2
3
4
5
6
7
8
9
10
11
12

position

array
relative
absolute
fixed
sticky

hover

array

border_radius

array
none
xs
sm
md
lg
xl
rounded

text_align

array
start
end
left
right
center
justify
justify-all
match-parent

overflow

array
visible
hidden
scroll
auto

truncate

array
1
2
3
4
5

left

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

top

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

right

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

bottom

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

overflow_x

array
visible
hidden
scroll
auto

overflow_y

array
visible
hidden
scroll
auto

classname

string

dark

boolean

margin

array
none
xxs
xs
sm
md
lg
xl

margin_bottom

array
none
xxs
xs
sm
md
lg
xl

margin_left

array
none
xxs
xs
sm
md
lg
xl

margin_right

array
none
xxs
xs
sm
md
lg
xl

margin_top

array
none
xxs
xs
sm
md
lg
xl

margin_x

array
none
xxs
xs
sm
md
lg
xl

margin_y

array
none
xxs
xs
sm
md
lg
xl

padding

array
none
xxs
xs
sm
md
lg
xl

padding_bottom

array
none
xxs
xs
sm
md
lg
xl

padding_left

array
none
xxs
xs
sm
md
lg
xl

padding_right

array
none
xxs
xs
sm
md
lg
xl

padding_top

array
none
xxs
xs
sm
md
lg
xl

padding_x

array
none
xxs
xs
sm
md
lg
xl

padding_y

array
none
xxs
xs
sm
md
lg
xl

id

string

data

hashprop

aria

hashprop

html_options

hashprop

children

proc
Props Type Values Default

disabled

boolean
false

full_width

boolean
false

icon

string

icon_right

boolean
false

link

string

loading

boolean
false

new_window

boolean
false

variant

enum
primary
secondary
link
reaction
primary

count

number

highlight

boolean
false

target

string

text

string

type

string

value

string

size

enum
sm
md
lg

form

string

icon_font_family

enum
far
fas
fab
fak
far