Buttons start an action. The button label will explain what happens when clicked.
The three button types make a hierarchy. Filled button (default/primary), outline button (secondary) and text button (tertiary). This hierarchy defines how the buttons are used in a user interface. There should only be one primary button on a page or within a course of action. If the button types are combined in a course of action it is important to follow this hierarchy resulting in putting the main action on the primary button and so on.
Filled button is used for the main action. A page may sometimes have more than one main action, but not many.
Outline button is used for less important actions. Avoid using it for a main action.
Text button is used for the least important actions.
Buttons can be used in three sizes; small, medium (default) and large. Medium is the size used in most situations. Small button is used when there is a need to save space. Large button is used for extra attention, but sparingly.
Fullwidth is used when the button should cover the entire width of a user interface. Often seen in the small breakpoint or vertical filter panels.
Buttons can have both text and icon. The icon can be positioned either left or right of the text. Choose what fit best in the user interface. All button types support icon.
All sizes support the different variantions of a button type.
Buttons can be used with only icons in a user interface to save space. Medium sized button is the most commonly used for these cases, however, small button can be used if the need to save even more space arises. This could be the case in small breakpoints of certain applications.
Availability requires text to accompany the icon. If the icon is used alone, it is recommended to wrap the text in a span with the class ods-sr-only to make the text available for screen readers.
Round buttons are icon only and rarely used. Should only be used in Large and Medium (default) size. See "Search" under "Form" for example use.
Buttons can be used with different colors. Dark blue is the primary color used on buttons for the service www.oslo.kommune.no. In some situations other colors are used to differentiate between content in the service. Yellow is for example used to highlight the button for "Contact" on www.oslo.kommune.no. See example here.
A set of buttons for use on dark backgrounds. The service www.oslo.kommune.no use dark blue as its dark background. Read more about contrast colors under the chapter "Colors".
Buttons can be used on different colored backgrounds. There are however some limitations depending on the color of the background. The buttons in the examples below have good contrast on the selected background colors. Read more about contrast colors under the chapter "Colors".
Buttons can have a disabled state.