Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Buttons are clickable elements that are used to act. They contain perform an action. Button contains a text label and a supporting icon can be displayed.

...

Buttons can contain a combination of a clear label and an icon while links are always text. Button is always displayed as an icon.

...

States

Buttons have five four states that define their appearance:

...

The primary reversed should be used for primary actions on pictures or dark backgrounds.

primary.large.text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

primary.large.icon+text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

primary.large.icon.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

primary.small.text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

primary.small.icon+text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

primary.small.icon.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

Secondary reversed

The secondary reversed should be used for secondary actions on pictures or dark backgrounds.

secondary.large.text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

secondary.large.icon+text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

secondary.large.icon

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

secondary.small.text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

secondary.small.icon+text.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

secondary.small.icon.

Image Added

Default (State)

Image Added

Hover (State)

Image Added

Focus (State)

Image Added

Disabled (State)

...

Sizes & Padding

...