Button

Example

Variants

Basic

Buttons are created by using class .btn on any element but it is recommended to use <a>, <button> or <input>.

white

Shapes

There are four basic button shapes. Default, radius, rounded and equilateral. You can set shape of button by using class .btn--[radius/round/equal]. Using both .btn--equal and .btn--round on one button creates a circle!

white

States

There are four button states: normal, hover (shows on mousehover), active (onclick), disabled.

white

Sizes

There are three main sizes of buttons: medium (default), large and small. Size is set with additional class like .btn--[large/small].

white

Types

There are five main buttons color variatons : default, primary, secondary, link and hollow. Color variation on button are set with additional class like .btn--[primary/link].

Default

white

Primary

white

Secondary

white

Link

white

Hollow

white

Inline icons

Inline icons sit in line with text.

Icon and text

white

Only icons

white

Positioned icons

Unlike inline icons, positioned icons sits outside regular text area at the side of the button.

white

Props

Prop	Type	Default	Description
elemRef	`object`		Forwarded DOM element ref.
equal	`bool`		Button with same width as height.
href	`string`		Link with href attribute rendered as button.
iconPosition	`"left"` \| `"right"`		Possible positions of icon inside button.
isActive	`bool`		Active state.
isDisabled	`bool`		Disabled state
shape	`"radius"` \| `"round"`		Button can take one of possible shapes.
size	`"small"` \| `"large"`		Button sizes
submit	`bool`		Button(input) with `type="submit"`.
tag	`string`	`"button"`	Html tag in which is button rendered.
type	`"primary"` \| `"secondary"` \| `"link"` \| `"hollow"`		Visual type of button.

Accessibility

The <Button /> component can render as <a>, <button> or <input>. Take care to always use the appropriate element. The rule of thumb is to use <a> if it takes you somewhere, <button> if it does something and <button type="submit"> or <input type="submit"> if it's used for submitting a form. Check the articles below for more information.

Don't disable buttons

Especially form submit buttons. A disabled button is not keyboard focusable. Instead of using the [disabled] attribute, it's advised to rather use [aria-disabled=true] - it still remains focusable, and a screenreader can find it and announce it's contents, along with the information that it's disabled.

Users should be able to submit incomplete and invalid forms, and should get relevant validation feedback, which explains what went wrong and how to fix it. It's considered a bad practice to let the user figure out thier errors themselves.

Icons

While it's recommended to always show a textual label acompanying an icon, this rule is often broken. When this happens, always make sure there is a textual alternative readable by assistive technology. There are three options:

alt attribute on the icon OR
[aria-label] on the button element OR
a visually visually hidden but accessible element (e.g. .sr-only)

Additional resources:

Aliases

<ButtonPrimary /> === <Button type="primary" />
<ButtonSecondary /> === <Button type="secondary" />
<ButtonLink /> === <Button type="link" />
<ButtonHollow /> === <Button type="hollow" />