Skip to content

Button

Todo

  • add accessiblity guidelines

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways.

Variants

Primary button

The Primary button is for all the action of high emphasis, as Save / primary action of the wizard etc.

Secondary button / Default button

Secondary Button

The secondary button has more emphasis then a ghost button. Mostly used for secondary important actions beside a primary button to highlight a hierarchy.

Ghost button

Ghost Button Ghost button is an text with a "invinsible" background, that is visible on hover or on select, when clicking on mobile.

normal state: Link in primary color.

hover state: shows the background of the primary color in 80% opacity.

disabled state: grey disabled.

Text Button

Currently the Text Button functions as unobtrusive Idea for a place, where alot of functions are already there and has the least importance.

Structure

Buttons can have various sizes. XS / S / SM / M / L

Guidelines / Usage

When to use

A button (<button>) element is used to indicate an action.

When not to use

If you are directing a user to a new location, consider using an anchor (<a>) element, which can also be styled like a button when actions and destinations are present in the same set of controls.

Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page.

Types

Use categories to bring varying action emphasis that guide the user when performing tasks.

Button type Use case
Primary Button Most important action on the page/section. A layout should contain a single primary button that makes it clear that other buttons have less importance in the hierarchy.
Default Button / Secondary Default Button for all other actions, that are available or less important than the primary
Ghost Button For the tertiary actions, who are less important or could stick out to much.

Alignment

Buttons can be aligned left, right, or center depending on the context.

Alignment Use case Sample Picture
Left alignment In page content and forms where the content is typically unconstrained other than by the normal OO Grid. In these instances an F-pattern (top to bottom and left to right in a horizontal movement) is common for reading flow, and buttons align with other content on the page like headings, lists, input labels, and form labels. freeflow diagram
Right alignment In fixed dialogs flows (Yes/No, Cancel,Delete...) that continue in a progressive direction (wizards) and toolbars. In these instances a Z-pattern (top to bottom and left to right with a diagonal, scanning movement) is common for reading flow. In these instances a user may be taking a progressive action, like affirming a modal, or an action upon a section, like formatting text in a comment. workflow
centered used for Emtpystates or when the content has the only available action on the screen. button centered

Order

When using multiple buttons, the position of the primary action is the most important part.

button order A primary button will be left-aligned and positioned to the left of the secondary/tertiary button. Execption is the ellipsis button, its placed at the beneath the primary button.