<button class="cwf-button">Button</button>
{% if element == 'button' %}
    {% if environment == 't4' %}
        <p class="t4_button">
            <button>{{ text }}</button>
        </p>
    {% else %}
        <button class="cwf-button">{{ text }}</button>
    {% endif %}
{% elseif element == 'link' %}
    {% if environment == 't4' %}
        <p class="t4_button">
            <a href="{{ href }}">{{ text }}</a>
        </p>
    {% else %}
        <a class="cwf-button" href="{{ href }}">{{ text }}</a>
    {% endif %}
{% elseif element == 'input' %}
    {% if environment == 't4' %}
        <p class="t4_button">
            <input type="{{ type }}" {{ value ? 'value="' ~ value ~ '"' }} />
        </p>
    {% else %}
        <input type="{{ type }}"
            {{ value ? 'value="' ~ value ~ '"' }}
            class="cwf-button" />
    {% endif %}
{% endif %}
{
  "element": "button",
  "text": "Button"
}
  • Content:
    // Button component styles
    
    @use "../../shared/animation";
    @use "../../shared/style";
    @use "../../shared/theme";
    
    // Selector prefix
    $prefix: "cwf" !default;
    
    // Button colors
    $background-color: style.color(blue, accent) !default;
    $border-color: style.lighten(
        style.color(blue, accent),
        24%
    ) !default; // #00a4eb
    $color: style.color(white) !default;
    
    // Active button colors
    $background-color--active: style.darken(
        style.color(blue, accent),
        24%
    ) !default; // #004f70
    $color--active: style.color(white) !default;
    
    // Button interaction colors
    $background-color--interact: style.lighten(
        style.color(blue, accent),
        24%
    ) !default; // #00a4eb
    $color--interact: style.color(gray-dark) !default;
    
    %button-properties {
        --cwf-button--background-color: #{$background-color};
        --cwf-button--border-color: #{$border-color};
        --cwf-button--color: #{$color};
        --cwf-button--active--background-color: #{$background-color--active};
        --cwf-button--active--color: #{$color--active};
        --cwf-button--hover-focus--background-color: #{$background-color--interact};
        --cwf-button--hover-focus--color: #{$color--interact};
    }
    
    %button-styles {
        display: inline-block;
        user-select: none;
        border-radius: 1.5rem;
        padding: 0.5rem 1rem;
        border: 1px solid var(--cwf-button--border-color);
        background-color: var(--cwf-button--background-color) !important;
        line-height: 1.5;
        font-family: theme.font--sans-serif();
        font-weight: 700;
        text-decoration: none;
        color: var(--cwf-button--color) !important;
        @include animation.transition(background-color, color);
    
        &:active {
            background-color: var(
                --cwf-button--active--background-color
            ) !important;
            color: var(--cwf-button--active--color) !important;
        }
    
        &:focus,
        &:hover {
            background-color: var(
                --cwf-button--hover-focus--background-color
            ) !important;
            color: var(--cwf-button--hover-focus--color) !important;
        }
    }
    
    .t4_button {
        @extend %button-properties;
    
        a,
        button,
        input[type="submit"],
        input[type="reset"],
        input[type="button"] {
            @extend %button-styles;
        }
    }
    
    .#{$prefix}-button {
        @extend %button-properties;
        @extend %button-styles;
    }
    
  • URL: /components/raw/button/_index.scss
  • Filesystem Path: components/button/_index.scss
  • Size: 2.3 KB

Button

The button component displays HTML links, buttons, and inputs into prominent, call-to-action, interactable elements.

Usage

Button components should be used when a regular link, button, or input needs to be more visually prominent in order to gain a user’s attention or convey importance compared to surrounding, interactable elements.

Structure

To convert a link, button, or input into a button, add a .cwf-button class to it. When in the T4 WYSIWYG editor, highlight the link or button you want to convert into a button, and select Format -> Formats -> t4_button; This will wrap the interactable element in a .t4_button element, which has the same desired effect.

Styles

Buttons are relatively large and pill-shaped, with a blue background, lighter blue border, and white text. When hovered, the text will turn a dark gray and the background will shift to a lighter blue. There are no variations or layout optins.

Custom CSS properties

  • --cwf-button--background-color - The button’s background color (default #006894).
  • --cwf-button--border-color - The button’s border color (default #00a5eb).
  • --cwf-button--color - The button’s text color (default #fff).
  • --cwf-button--active--background-color - The button’s active background color (default #004f70).
  • --cwf-button--active--color - The button’s active text color (default #fff).
  • --cwf-button--hover-focus--background-color - The button’s hover/focus background color (default #00a5eb).
  • --cwf-button--hover-focus--color - The button’s hover/focus text color (default #333).

Functionality

There is no button-specific Javascript included.

T4 implementation

The button component is not tied to a specific content type, and both the .cwf-button and .t4_button classes are automatically included in the Compass T4 page layout. It is advised to us the T4-specific class when working within a T4 WYSIWYG editor.

View graphic versionView graphic versionView graphic version