Button Modifier

A button can be customized using class modifiers. The following sub-chapters list all existing classes of button modifier.

The following list describe all existing modifier classes of the component and all related daat attributes.

• .button--stretch use width 100%
• .button--stretch-{SCREEN_SIZE} width 100% until the screen size
• .button--stretch use width 100%
• .button--scale-{SCALE} - scale the size of an icon
• .button--scale-{SCALE}-{SCREEN_SIZE} scale until the screen size
• .button--loading - show a loading spinner within the button
• .button--star - add a star with text to the button
• .button--gradient - gets the border of the button a color gradient
• .button--gradient-horizontal - change the direction of the gradient
• --sg-button-gradient-from - change the colors of the border gradient with the custom properties
• --sg-button-gradient-to - change the colors of the border gradient with the custom properties
• .button--custom-light - create your own simple Button Variant, use this modifier, if your color is a lighter one
• .button--custom-dark - create your own simple Button Variant, use this modifier, if your color is a darker one
• .button--corner-{VERTICAL}-{HORIZONTAL} change the named corner border radius to zero

The variables are:

• SCREEN_SIZE xl, lg, md, sm, xs
• SCALE x0.500, x0.625, x0.750, x0.875, x1.000, x1.125, x1.250, x1.375, x1.500
• VERTICAL top, bottom
• HORIZONTAL start, end

Scale

A button with this modifier scale up or down. This can be used with the class modifier .button--scale-{SCALE} and .button--scale-{SCALE}-{SCREEN_SIZE}.

Stretch

The following examples show the stretched button.

Loading

We interpret the loading state as the sixth button status. In fact, this is just a simple class modifier .button--loading. Every button can get this status. The text is faded out (color transparent) and a loading animation is displayed.

Only the <input class="button"> HTML tag cannot display this status (an html input do not have a pseudo ::after or ::before).

Star Badge

The star badge adds a star to the button, which can contain any word with up to three letters. It’s designed to say NEW (or the German NEU) in there. You can change the text but it should have maximal three letters.

Gradient

With the .button--gradient modifier the border of the button gets a color gradient.

By default the button uses the zero primary colors for the gradient colors. You can change the colors with the custom properties --sg-button-gradient-from and --sg-button-gradient-to.

You can also change the direction of the gradient with the modifier .button--gradient-horizontal.

Custom Colors

We have a lots of predefined color variants for our buttons (see Variants above). But often we need an additional color variant for only one situation. But in such moments, it is not worthy to create a new button color variant for only this situation. So you can use another method for your colored button: the custom colors!

You must add a block modifier and a style tag to you button and so you can colorize your own button. Their are two modifier you can use:

• .button--custom-light - Use this modifier, if your color is a lighter one, like yellow, kaki or lime. The effects while hover/focus/press/… while be darken you base color.
• .button--custom-dark - Use this modifier, if your color is a darker one, like blue, green or indigo. The effects while hover/focus/press/… while be lighten you base color.

Additional to the modifier, you must change the custom property --sg-button-custom. Here is an example how to:

<button class="button button--custom-light" style="--sg-button-custom: lime">Lime Background</button>

You can also use the style guide Colors:

<button class="button button--custom-dark" style="--sg-button-custom: var(--sg-color-brand-finnet-red)">Finnet Red Background</button>

Corner Button

Change the border radius of the button in the named corner.

Sizing

WORK IN PROGRESS Create a .button--size button that change the button height without changing the font-size.