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.
<button class="gds-circular-button gds-circular-button--primary"><i class="fa fa-fw fa-trash-o"></i></button>
Optional classes:
gds-circular-button--xs
gds-circular-button--sm
gds-circular-button--lg
gds-circular-button--xl
gds-circular-button--secondary
gds-circular-button--success
gds-circular-button--warning
gds-circular-button--info
gds-circular-button--danger
gds-circular-button--dark
gds-circular-button--white
gds-circular-button--toggle
gds-circular-button--active
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
gds-circular-button__image
gds-circular-button--inactive