Button Group

The button-group component, prefixed by gds-button-group, is used for arranging button components into a group.

Note: By using HTML comments in between 'display: inline-block' elements as in the example code below, the default spacing between the elements is eliminated and they render directly adjacent to each other.

Demo

    <div className="gds-button-group">
    <button type="button" className="gds-button-group__button gds-button--default">Default</button>
    <button type="button" className="gds-button-group__button gds-button--primary">Primary</button>
    <button type="button" className="gds-button-group__button gds-button--success">Success</button>
    <button type="button" className="gds-button-group__button gds-button--info">Info</button>
    <button type="button" className="gds-button-group__button gds-button--warning">Warning</button>
    <button type="button" className="gds-button-group__button gds-button--danger">Danger</button>
    <button type="button" className="gds-button-group__button gds-button--link">Link</button>
</div>


    <div className="gds-button-group">
    <button type="button" className="gds-button-group__button gds-button--default">Default</button>
    <button type="button" className="gds-button-group__button gds-button--primary">Primary</button>
    <button type="button" className="gds-button-group__button gds-button--success">Success</button>
    <button type="button" className="gds-button-group__button gds-button--info">Info</button>
    <button type="button" className="gds-button-group__button gds-button--warning">Warning</button>
    <button type="button" className="gds-button-group__button gds-button--danger">Danger</button>
    <button type="button" className="gds-button-group__button gds-button--link">Link</button>
</div>

Error Log

Size

gds-button-group--lg

gds-button-group__button--lg

gds-button-group--sm

gds-button-group__button--sm

gds-button-group--xs

gds-button-group__button--xs

Display

gds-button-group--responsive

gds-button-group__button--responsive