Buttons

The btn classes and react-widgets are deprecated, use fun-button instead.

Buttons trigger actions in the application by being clicked or tapped by the user.

Do use buttons for actions like ‘Edit’, ‘Save’, ‘Run’.

Don't

Do not use links for actions. Links are only for navigation.

Avoid

Avoid using buttons for navigation, prefer links styled as buttons instead, as these preserve standard browser behaviour like cmd+click and right-click.

Button types

Primary buttons

A “Primary” button should be used for the primary action on a page or dialog.

Must always have an icon.
Must be understandable without looking at the icon.
The label must be capitalized.
There should only be one primary action per page or dialog.
Should usually be size “medium”

Secondary buttons

A “Secondary” button should be used for other major actions.

May have an icon.
Must be understandable without looking at the icon.
The label must be capitalized.

Flat buttons

“Flat” buttons can be used for minor actions instead of “Secondary” buttons, where a secondary button would be too ‘noisy’ or repetitive.

Flat buttons must follow the same rules as secondary buttons.

Icon buttons

Icon buttons can be used in lists and other places where a full button would take too much space or be repetitive.

Icon buttons:

Must have an icon
Should have a tooltip
Should be medium size
Should be grey (btn-default)

Delete button should always open a modal (see modals for how it should look)

List buttons

A less noisy button that works well to have next to icon buttons, for use in lists. Example of usage in table.

List buttons:

Must have an icon
Must be small size
Should be grey (btn-default)

Cancel buttons

“Cancel” buttons are to be used in Modals and Edit pages, and nowhere else.

Cancel buttons:

Do not have an Icon
Must have label ‘Cancel’

See Modals for more on use in Modals.
See Page headers for more on use in Page headers.

Button sizes

Button type	Large	Medium	Small	X-small
primary
Secondary
Warning
Flat / tertiary

Button states

Button type	Normal	Hover	Focus	Active	Disabled
Primary
Secondary
Warning
Danger
Success
Flat / tertiary
Flat warning
Flat danger
Cancel button
Icon button

Busy and disabled

If an action takes time, the icon should be switched to a progress spinner and the button should be disabled.

Destructive actions

Use the word “remove” when there is a possibility to add the thing back again, for instance when you just remove the relationship between two entities.
Use the word “delete” when the thing is gone forever, for instance when deleting a user completely.
Destructive actions should have two steps, where the second step is a confirmation.
The first action button should not be red. But the second one in the confirmation dialog should be. Check example here.