Circular Button
The circular button component, prefixed by gds-circular-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-circular-button--success
, gds-circular-button--lg
, & gds-circular-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
Size
gds-circular-button--xs
gds-circular-button--sm
gds-circular-button--lg
gds-circular-button--xl
Context (Color)
gds-circular-button--secondary
gds-circular-button--success
gds-circular-button--warning
gds-circular-button--info
gds-circular-button--danger
gds-circular-button--white
gds-circular-button--toggle
gds-circular-button--dark
gds-circular-button--dark-primary
gds-circular-button--dark-secondary
gds-circular-button--dark-tertiary
gds-circular-button--dark-success
gds-circular-button--dark-info
gds-circular-button--dark-warning
gds-circular-button--dark-danger
gds-circular-button--dark-toggle
State
gds-circular-button--active
gds-circular-button--inactive
disabled="disabled"
Image
gds-circular-button__image