O3 World Component Library

Button 

<p>Styles applied to a <strong>button</strong> tag</p>

<button class="btn">Active</button>

<button class="btn" disabled>Disabled</button>

<button class="btn">
    With Icon
    <svg class="btn__arrow" viewBox="0 0 407.437 407.437" role="presentation" aria-hidden="true">
        <polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
    </svg>
</button>

<p>Styles applied to an <strong>a</strong> tag</p>

<a href="/" class="btn">Active</a>

<a href="/" class="btn">
    With Icon
    <svg class="btn__arrow" viewBox="0 0 407.437 407.437" role="presentation" aria-hidden="true">
        <polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
    </svg>
</a>
 
<p>Styles applied to a <strong>button</strong> tag</p>

<button class="btn">Active</button>

<button class="btn" disabled>Disabled</button>

<button class="btn">
    With Icon
    <svg class="btn__arrow" viewBox="0 0 407.437 407.437" role="presentation" aria-hidden="true">
        <polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
    </svg>
</button>

<p>Styles applied to an <strong>a</strong> tag</p>

<a href="/" class="btn">Active</a>

<a href="/" class="btn">
    With Icon
    <svg class="btn__arrow" viewBox="0 0 407.437 407.437" role="presentation" aria-hidden="true">
        <polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
    </svg>
</a>
 
/* No context defined for this component. */
  • Content: 
    .btn {
    @include font-size(14);

    display: inline-block;
    border-radius: 8px;
    border: 0;
    padding: 10px 20px;
    min-width: 140px;
    background-color: color(primary, base);
    text-align: center;
    text-transform: uppercase;
    line-height: 1.75;
    font-family: $brand-font-b;
    font-weight: 400;
    color: color(default, light);
    transition: .2s $ease-in-sine;
    appearance: none;

    &:focus,
    &:hover {
        background-color: color(primary, hover);
        cursor: pointer;
    }

    &:disabled,
    &--disabled {
        background-color: color(neutral, base);
        pointer-events: none;
    }

    &__arrow {
        margin-left: 5px;
        width: 10px;
        height: 10px;
        fill: color(default, light);
    }
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: components/button/_button.scss
  • Size: 772 Bytes

Usage

Buttons enable users to trigger an action or event. Styling is done via CSS and can be applied to button and a elements.

Labelling Expectations

  • If the button includes an icon, the icon should include role="presentation" and aria-hidden="true"

Focus Expectations

  • Buttons should have a visible keyboard focus state
  • All keyboard interactions relate to when buttons are focused

Keyboard Expectations

  • Enter or Space = Activate button