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.

Prototypes Page

<button class="gds-button gds-button--default">Default button</button>

Optional classes:

• gds-button--default
• gds-button--lg
• gds-button--sm
• gds-button--xs
• gds-button--primary
• gds-button--secondary
• gds-button--white
• gds-button--tertiary
• gds-button--success
• gds-button--warning
• gds-button--info
• gds-button--danger
• gds-button--link
• gds-button--toggle
• gds-button--active
• gds-button--block
• gds-button--block-xs
• gds-button--block-sm
• gds-button--block-md
• gds-button--block-lg
• gds-button--block-xl
• 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