Button

Ready Added in 2.0.0

Buttons are used to signal actions, submit forms, or trigger new content within the current context.

Usage

To apply this component, add the .gls-button class and a modifier such as .gls-button-default to an <a> or <button> element. Add the disabled attribute to a <button> element to disable the button.

<a class="gls-button gls-button-default" href=""></a>

<button class="gls-button gls-button-default"></button>

<button class="gls-button gls-button-default" disabled></button>

  • Link 

  • <p gls-margin>
    <a class="gls-button gls-button-default" href="#">Link</a>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default" disabled>Disabled</button>
</p>

Note If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the gls-margin attribute from the Margin component to their parent element.

Guidelines

When to use

  • Opening or closing a modal or dialog
  • Triggering a dropdown menu
  • Submitting data to the server

When to consider something else

  • Navigating to a new page or view in your application
  • Navigating to different web page, e.g. external documentation

Resources

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

Class Description
.gls-button-default Default button style.
.gls-button-outline Outline button style.
.gls-button-primary Indicates the primary action.
.gls-button-secondary Indicates an important action.
.gls-button-tertiary Indicates a less important action.
.gls-button-danger Indicates a dangerous or negative action.
.gls-button-text Applies n typographic style.
.gls-button-link Applies an plain link style. 
<button class="gls-button gls-button-primary"></button>


  • <p gls-margin>
    <button class="gls-button gls-button-default">Default</button>
    <button class="gls-button gls-button-primary">Primary</button>
    <button class="gls-button gls-button-outline">Outline</button>
    <button class="gls-button gls-button-secondary">Secondary</button>
    <button class="gls-button gls-button-tertiary">Tertiary</button>
    <button class="gls-button gls-button-danger">Danger</button>
    <button class="gls-button gls-button-text">Text</button>
    <button class="gls-button gls-button-link">Link</button>
</p>

Size modifiers

Add the .gls-button-small or .gls-button-large class to a button to make it smaller or larger.

<button class="gls-button gls-button-default gls-button-small"></button>

<button class="gls-button gls-button-default gls-button-large"></button>


  • <p gls-margin>
    <button class="gls-button gls-button-default gls-button-small">Small button</button>
    <button class="gls-button gls-button-primary gls-button-small">Small button</button>
    <button class="gls-button gls-button-secondary gls-button-small">Small button</button>
    <button class="gls-button gls-button-tertiary gls-button-small">Small button</button>
</p>

<p gls-margin>
    <button class="gls-button gls-button-default gls-button-large">Large button</button>
    <button class="gls-button gls-button-primary gls-button-large">Large button</button>
    <button class="gls-button gls-button-secondary gls-button-large">Large button</button>
    <button class="gls-button gls-button-tertiary gls-button-large">Large button</button>
</p>

Width modifiers

Add the .gls-width-1-1 class from the Width component and the button will take up full width.

Example

  • <button class="gls-button gls-button-default gls-width-1-1 gls-margin-small-bottom">Button</button>
<button class="gls-button gls-button-outline gls-width-1-1 gls-margin-small-bottom">Button</button>
<button class="gls-button gls-button-primary gls-width-1-1 gls-margin-small-bottom">Button</button>
<button class="gls-button gls-button-secondary gls-width-1-1 gls-margin-small-bottom">Button</button>
<button class="gls-button gls-button-tertiary gls-width-1-1">Button</button>

Group

To create a button group, add the .gls-button-group class to a <div> element around the buttons. That’s it! No further markup needed.

<div class="gls-button-group">
    <button class="gls-button gls-button-default"></button>
    <button class="gls-button gls-button-default"></button>
    <button class="gls-button gls-button-default"></button>
</div>

  • <div class="gls-margin-small">
    <div class="gls-button-group" role="group">
        <button class="gls-button gls-button-default">Button</button>
        <button class="gls-button gls-button-default">Button</button>
        <button class="gls-button gls-button-default">Button</button>
    </div>
</div>

<div class="gls-margin-small">
    <div class="gls-button-group" role="group">
        <button class="gls-button gls-button-outline">Button</button>
        <button class="gls-button gls-button-outline">Button</button>
        <button class="gls-button gls-button-outline">Button</button>
    </div>
</div>

<div class="gls-margin-small">
    <div class="gls-button-group" role="group">
        <button class="gls-button gls-button-secondary">Button</button>
        <button class="gls-button gls-button-secondary">Button</button>
        <button class="gls-button gls-button-secondary">Button</button>
    </div>
</div>

<div class="gls-margin-small">
    <div class="gls-button-group" role="group">
        <button class="gls-button gls-button-primary">Button</button>
        <button class="gls-button gls-button-primary">Button</button>
        <button class="gls-button gls-button-primary">Button</button>
    </div>
</div>

<div>
    <div class="gls-button-group" role="group">
        <button class="gls-button gls-button-danger">Button</button>
        <button class="gls-button gls-button-danger">Button</button>
        <button class="gls-button gls-button-danger">Button</button>
    </div>
</div>

Accessibility notes

When using the button groups, it’s important to apply the ARIA attribute role="group" to the <div> container. This conveys two things to assistive technologies (AT):

  • The buttons are related to one another
  • AT should announce that the buttons are part of a group

In addition to the ARIA group role, use the aria-label attribute to provide more information to AT. This is especially important if you are using more than one set of segmented buttons on a page.

As an alternative, you could also use an aria-labelledby attribute. Its value should correspond to the id of text that labels what the segmented button controls.See this article on associating related controls with WAI-ARIA for more information.

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component.

<!-- A button toggling a dropdown -->
<button class="gls-button gls-button-default" type="button"></button>
<div gls-dropdown></div>

  • <div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Dropdown</button>
    <div gls-dropdown>
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

Button group with dropdowns

Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap the toggling button and the drop or dropdown inside a <div> element and add the .gls-inline class from the Utility component.

<!-- A button group with a dropdown -->
<div class="gls-button-group">
    <button class="gls-button gls-button-default"></button>
    <div class="gls-inline">

        <!-- The button toggling the dropdown -->
        <button class="gls-button gls-button-default" type="button"></button>
        <div gls-dropdown="mode: click; boundary: ! .gls-button-group; boundary-align: true;"></div>

    </div>
</div>

  • <div class="gls-button-group">
    <button class="gls-button gls-button-default">Dropdown</button>
    <div class="gls-inline">
        <button class="gls-button gls-button-default" type="button"><span gls-icon="icon:  triangle-down"></span></button>
        <div gls-dropdown="mode: click; boundary: ! .gls-button-group; boundary-align: true;">
            <ul class="gls-nav gls-dropdown-nav">
                <li class="gls-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>