Button Basics

An HTML element to which a .button block class is added has the design of a clickable button.

This class can be applied to a wide variety of html tags. All these elements become inline elements through the button class.

Some versions require an element class .button__label. This is used in particular if you want to add other elements in addition to the text, for example icons.

Versions Through different HTML structures, we differentiated a lot of different versions of buttons (see Button HTML Structure)

Variants All button versions have different variants, which differ in a their color scheme. We support six color variants as standard (default, primary, success, danger, warning, flat) plus further variants for the individual themes or with branded colors. (see Button Variants)

States A button always has six statuses (default, hover, focus, press, disable, loading, see Button States). The six statuses are explicitly defined for each color variant.

Modifiers In addition, buttons can be adapted to different needs using further modifiers, for example by stretching or sizing (see Button Modifiers (xl, lg, md, sm, xs).

HTML Structure

We can display the classic <button> as well as the <input type="submit"> in our button style with the class .button. In addition, we can also assign the class to all block and inline elements (like <div>, <a>, <span>, etc).

If we want to add an icon, we have to add a <span class="button__label"> in addition to a <span class="icon icon--**">. Depending on whether the icon is before or after the label, the icon is positioned on the left or right side (or both).

If we want to add an flag, we have to add a <span class="button__label"> in addition to a <span class="flag flag--**">. Depending on whether the flag is before or after the label, the flag is positioned on the left or right side (or both).

Special mention should be made of the avatar buttons (.button--avatar-left, .button--avatar-right), the pill buttons (.button--pill) and the star buttons (.button__star-badge) which differ from the previously mentioned ones by a class modifier.

ATTENTION The input button cannot display any icons.

States

Each button (and each Button Variants) has six statuses:

• default: When a website has been opened for the first time and a button has not yet been used, it is in its basic state.
• hover: As soon as a user moves the mouse over the button, it becomes in hover state.
• focus: If the user uses the keyboard with the tabulator, the button is put into focus status. Note the focus status cannot be activated with the mouse.
• press: Finally, the user presses the button with a touch event or with a mouse click and puts it in the pressed state.
• disable: A button can be disabled, in this case it is not clickable but is still displayed. Use with .button--disable class modifier or [disable] attribute. Note it is better to disable a button than to hide it.
• loading: It often happens that a button triggers an action that takes a certain amount of time. In this case there is the loading status. As in the disable status, the button can no longer be clicked, and a simple loading animation shows the user that the application is performing an action in the background. Use with .button--loading class modifier.

Logo

You can add a Logo to a button. You must use the .button__label element as an container.

Badge

You can add a Badge to a button. You must use the .button__label.