Buttons

You all know the buttons. We all love the buttons. Buttons are used to trigger actions.

They come in lots of styles and sizes though. Let’s have a look.

Button styles

Buttons come in a few main variants:

In addition, there are a few special styles:

Button sizes

Buttons can be made smaller by adding either a small or mini prop.

These should only be used very occasionally. Especially the mini is only for very special cases. If you find yourself using it to create hierarchies of buttons, you should probably rethink your design.

Linking buttons

By default, you’ll want to us the onClick prop of a button to trigger an action.

However, sometimes you want to use a button to link to another page. In that case, you can use the href prop, which will ensure the button renders as an <a> tag.

If you want to use a button as a React Router link, you can use the as prop to specify the component to render. This will ensure the button renders as a <Link> tag:

import { Link } from 'react-router-dom';
 
<Button as={Link} to="/some-page">
	Link to some page
</Button>;

Buttons and icons

Buttons work well with icons. Simply add a <Icon> component inside the button.

Whilst the component supports icons in front or after text in a button, or even on their own, we recommend using them only in front of text. In rare cases, using an icon in a button on its own can be useful (especially in combination with the link style), but it should be used sparingly.

If you are using a button with only a single icon, you should also consider adding a title prop to the button, so that screen readers can announce the purpose of the button.

Dropdown buttons

Dropdown menus that give access to multiple options are available through the <DropdownMenu> component, which takes a buttonText prop to render the button, and a list of <DropdownItem> components as children.