Button
The button component, prefixed by gds-button
, is used to style <button>
tags. Note that all optional classes may be used in combination with each other, for example on a single element with gds-button--success
, gds-button--lg
, & gds-button--block
classes. To indicate that a button is disabled, use the disabled="disabled"
HTML attribute.
To make a button appear at block level at a specific breakpoint and below, use the breakpoint-specific block modifiers.
Demo
Error Log
Context (Color)
gds-button--default
gds-button--primary
gds-button--success
gds-button--danger
gds-button--warning
gds-button--secondary
gds-button--white
gds-button--tertiary
gds-button--info
gds-button--link
gds-button--toggle
gds-button--dark
gds-button--dark-primary
gds-button--dark-secondary
gds-button--dark-tertiary
gds-button--dark-success
gds-button--dark-danger
gds-button--dark-info
gds-button--dark-warning
gds-button--dark-toggle
Size
gds-button--xs
gds-button--sm
gds-button--md
gds-button--lg
State
gds-button--active
disabled="disabled"
Display
gds-button-group__button
gds-button--block
gds-button--block-xs
gds-button--block-sm
gds-button--block-md
gds-button--block-lg
gds-button--block-xl