Button

button component

Introduction

The button component is used for navigating and triggering actions.

View in Groundhog

A button holds text, an icon or a combination of both. When using an icon only, it needs to be self-explanatory.

Styleguide

font-family: Bernina Sans Regular
font-size: 14px
height: 30px
border-width: 1px
border-radius: 3px
text-align: center

Buttons margin and padding

x: 8px
y: 16px

Button variants

Compared to the secondary button, the primary button is more dominant and will attract the users attention with ease. This can be used to guide the user and help him perform the right actions. The secondary button is used for secondary actions.

The button component is themable and colored differently in the context of:

Primary

Default

Primary button default

color: #fff
background-color: $turquoise-600
border: 1px solid $turquoise-600

Hover

Primary button hover

color: #fff
background-color: $turquoise-700
border: 1px solid $turquoise-700

Active

Primary button active

color: #fff
background-color: $turquoise-800
border: 1px solid $turquoise-800

Disabled

Primary button disabled

color: #fff
background-color: $gray-300
border: transparent

Primary button with icon

Primary button with icon

icon-width: 20px

Secondary

Default

Secondary button default

color: $turquoise-600
background-color: transparent
border: 1px solid $turquoise-600

Hover

Secondary button hover

color: $turquoise-700
background-color: $gray-100
border: 1px solid $turquoise-700

Active

Secondary button active

color: $turquoise-800
background-color: $gray-100
border: 1px solid $turquoise-800

Disabled

Secondary button disabled

color: $gray-300
background-color: transparent
border: 1px solid $gray-300

Secondary button with icon

Secondary button with icon

icon-width: 20px

Call to action button primary

Default

Call to action primary button default

color: #fff
background-color: $green-600
border: 1px solid $green-600

Hover

Call to action primary button hover

color: #fff
background-color: $green-700
border: 1px solid $green-700

Active

Call to action primary button active

color: #fff
background-color: $green-800
border: 1px solid $green-800

Disabled

Call to action primary button disabled

color: #fff
background-color: $gray-300
border: transparent

Call to action button secondary

Default

Call to action secondary button default

color: $green-600
background-color: transparent
border: 1px solid $green-600

Hover

Call to action secondary button hover

color: $green-700
background-color: $gray-100
border: 1px solid $green-700

Active

Call to action secondary button active

color: $green-800
background-color: $gray-100
border: 1px solid $green-800

Disabled

Call to action secondary button disabled

color: $gray-300
background-color: transparent
border: 1px solid $gray-300

Warning button primary

Default

Warning button primary button default

color: #fff
background-color: $yellow-600
border: 1px solid $yellow-600

Hover

Warning button primary button hover

color: #fff
background-color: $yellow-700
border: 1px solid $yellow-700

Active

Warning button primary button active

color: #fff
background-color: $yellow-800
border: 1px solid $yellow-800

Disabled

Warning button primary button disabled

color: #fff
background-color: $gray-300
border: transparent

Warning button secondary

Default

Warning button secondary button default

color: $yellow-600
background-color: transparent
border: 1px solid $yellow-600

Hover

Warning button secondary button hover

color: $yellow-700
background-color: $gray-100
border: 1px solid $yellow-700

Active

Warning button secondary button active

color: $yellow-800
background-color: $gray-100
border: 1px solid $yellow-800

Disabled

Warning button secondary button disabled

color: $gray-300
background-color: transparent
border: 1px solid $gray-300

Nested buttons

Nested buttons are a variant of icon-only buttons and can't be used with text. These buttons are only used within other components (e.g. input fields, tables,... )

Default

Nested button default

icon-width: 20px
icon-color: $turquoise-600
height: 100% //height is defined by the container
max-height: 32px
width: same as height

Hover

Nested button hover

icon-color: $turquoise-700
background-color: $gray-100
border-radius: 3px

Active

Nested button active

icon-color: $turquoise-800

Disabled

Nested button disabled

icon-color: $gray-300

Primary on dark background

Default

Primary button on dark background default

color: #fff
background-color: $turquoise-500
border: 1px solid #fff

Hover

Primary button on dark background hover

color: #fff
background-color: $turquoise-400
border: 1px solid #fff

Active

Primary button on dark background active

color: #fff
background-color: $turquoise-300
border: 1px solid #fff

Disabled

Primary button on dark background disabled

color: rgba(255, 255, 255, 0.6)
background-color: rgba(255, 255, 255, 0.2)
border: transparent

Secondary on dark background

Default

Secondary button on dark background default

color: $gray-100
background-color: transparent
border: 1px solid #fff

Hover

Secondary button on dark background hover

color: $gray-100
background-color: rgba(255, 255, 255, 0.2)
border: 1px solid #fff

Active

Secondary button on dark background active

color: #fff
background-color: rgba(255, 255, 255, 0.3)
border: 1px solid #fff

Disabled

Secondary button on dark background disabled

color: rgba(255, 255, 255, 0.6)
background-color: transparent
border: 1px solid rgba(255, 255, 255, 0.2)

Call to action button primary on dark background

Default

Call to action primary button on dark background default

color: #fff
background-color: $green-500
border: 1px solid #fff

Hover

Call to action primary button on dark background hover

color: #fff
background-color: $green-400
border: 1px solid #fff

Active

Call to action primary button on dark background active

color: #fff
background-color: $green-300
border: 1px solid #fff

Disabled

Call to action primary button on dark background disabled

color: rgba(255, 255, 255, 0.6)
background-color: rgba(255, 255, 255, 0.2)
border: transparent

Call to action button secondary on dark background

Default

Call to action secondary button on dark background default

color: #fff
background-color: transparent
border: 1px solid $green-500

Hover

Call to action secondary button on dark background hover

color: #fff
background-color: rbga(255, 255, 255, 0.2)
border: 1px solid $green-400

Active

Call to action secondary button on dark background active

color: #fff
background-color: rbga(255, 255, 255, 0.3)
border: 1px solid $green-300

Disabled

Call to action secondary button on dark background disabled

color: rgba(255, 255, 255, 0.6)
background-color: transparent
border: 1px solid rgba(255, 255, 255, 0.2)

Warning button primary on dark background

Default

Warning button primary button on dark background default

color: #fff
background-color: $yellow-600
border: 1px solid #fff

Hover

Warning button primary button on dark background hover

color: #fff
background-color: $yellow-500
border: 1px solid #fff

Active

Warning button primary button on dark background active

color: #fff
background-color: $yellow-400
border: 1px solid #fff

Disabled

Warning button primary button on dark background disabled

color: rgba(255, 255, 255, 0.6)
background-color: rgba(255, 255, 255, 0.2)
border: transparent

Warning button secondary on dark background

Default

Warning button secondary button on dark background default

color: #fff
background-color: transparent
border: 1px solid $yellow-600

Hover

Warning button secondary button on dark background hover

color: #fff
background-color: rgba(255, 255, 255, 0.2)
border: 1px solid $yellow-500

Active

Warning button secondary button on dark background active

color: #fff
background-color: rgba(255, 255, 255, 0.3)
border: 1px solid $yellow-400

Disabled

Warning button secondary button on dark background disabled

color: rgba(255, 255, 255, 0.6)
background-color: transparent
border: 1px solid rgba(255, 255, 255, 0.2)

Nested buttons on dark background

Default

Nested button on dark bg default

icon-color: #gray-100

Hover

Nested button hover

background-color: rgba(255, 255, 255, 0.2)
border-radius: 3px

Active

Nested button active

icon-color: $fff
background-color: rgba(255, 255, 255, 0.3)

Disabled

Nested button disabled

icon-color: rgba(255, 255, 255, 0.6)

Animation

The button component is not animated at all.

Behavior and corner cases

Button with a lot of text

The button width is based on the text it holds. While being as short as possible, the text should clearly describe a button's action.

Multiple buttons

Buttons beside each other

Buttons underneath each other

x: 8px

Combination with other components

Buttons in tables

Buttons in tables

Buttons in tables

Use secondary buttons within tables.

x: 24px

Buttons in forms

Buttons in forms

Buttons with text

The alignment of buttons depends on the context.

Buttons in context menus

View the context dialog styleguide.

Buttons in call to action cards

View the call to action styleguide.

Copy to clipboard

Buttons can be used in combination with an input field or a text area for the copy to clipboard functionality. This is a simple and user-friendly way to copy text or some code with a single click.

Copy to clipboard green boarder style

border: 1px solid $green-500

Please use always the checkmark icon for the green copied-button.

The text is preselected and the green 'copied' state (checkmark) turns automatically to 'Copy' after a timeframe of 800 ms or a page refresh.

Textarea

The button is always aligned on the bottom right of a text area.

Dropdown copy to clipboard open Dropdown copy to clipboard open

Appearance in a dropdown

Step 1

Dropdown copy to clipboard open

Step 2

Dropdown copy to clipboard copied

Step 3

Dropdown copy to clipboard closed