Skip to main content Skip to navigation

Buttons

Use buttons to perform many important actions throughout the experience.

Primary

Hover
<button class="comet-button comet-button--primary">
    Subscribe Now
</button>
                
{{ comet.button(variations=["primary"], text="Subscribe Now") }}
                
Macro params reference
.get-started {
    @extend .comet-button;
    @extend .comet-button--primary;
}

<button class="get-started">Get Started</button>
                
                
Disabled
<button class="comet-button comet-button--primary comet-button--disabled">
    Subscribe Now
</button>
                
{{ comet.button(variations=["primary", "disabled"], text="Subscribe Now") }}
                
Macro params reference

Primary buttons emphasize primary function(s) of a page, amid busy or clear spaces.

  • Use for a primary action on a page or well-defined (bounded) component region.
  • Display using the platform or themed color.
  • Limit primary buttons per page, ideally to one.
  • Disabled buttons must have the disabled attribute to prevent functionality. The comet-button--disabled class only provides styling.

Secondary

Hover
<button class="comet-button comet-button--secondary">
    Cancel
</button>
                
{{ comet.button(variations=["secondary"], text="Cancel") }}
                
Macro params reference
.later {
    @extend .comet-button;
    @extend .comet-button--secondary;
}

<button class="later">Remind Me Later</button>
                
                
Disabled
<button class="comet-button comet-button--secondary comet-button--disabled">
    Cancel
</button>
                
{{ comet.button(variations=["secondary", "disabled"], text="Cancel") }}
                
Macro params reference

Secondary buttons are additional actions paired with an adjacent single primary action.

  • Always use unattached, adjacent to a primary action.
  • Never use a color other than the traditional dark neutral color.
  • Limit to few secondary actions, ideally one or two.
  • Disabled buttons must have the disabled attribute to prevent functionality. The comet-button--disabled class only provides styling.

Ghost

Hover
<button class="comet-button comet-button--ghost">
    Add To List
</button>
                
{{ comet.button(variations=["ghost"], text="Add To List") }}
                
Macro params reference
.save {
    @extend .comet-button;
    @extend .comet-button--ghost;
}

<button class="save">Save</button>
                
                
Disabled
<button class="comet-button comet-button--ghost comet-button--disabled">
    Add To List
</button>
                
{{ comet.button(variations=["ghost", "disabled"], text="Add To List") }}
                
Macro params reference
On-Dark
<button class="comet-button comet-button--ghost comet-button--on-dark">
    Add To List
</button>
                
{{ comet.button(variations=["ghost", "on-dark"], text="Add To List") }}
                
Macro params reference

Ghost buttons lack a background color, reducing contrast.

  • Use sparingly for persistent, non-primary actions, such as a toolbar.
  • Never use on a photograph or gradient. Only use on a flat color.
  • Validate use has accessible contrast of button label with background color.
  • Disabled buttons must have the disabled attribute to prevent functionality. The comet-button--disabled class only provides styling.

Flat

Hover
<button class="comet-button comet-button--flat">
    Learn More
</button>
                
{{ comet.button(variations=["flat"], text="Learn More") }}
                
Macro params reference
.add-attachment {
    @extend .comet-button;
    @extend .comet-button--flat;
}

<button class="add-attachment">Attach File</button>
                
                
Disabled
<button class="comet-button comet-button--flat comet-button--disabled">
    Learn More
</button>
                
{{ comet.button(variations=["flat", "disabled"], text="Learn More") }}
                
Macro params reference
On-Dark
<button class="comet-button comet-button--flat comet-button--on-dark">
    Learn More
</button>
                
{{ comet.button(variations=["flat", "on-dark"], text="Learn More") }}
                
Macro params reference

Flat buttons are text-only buttons that diminish contrast with surrounding elements, reducing its primacy.

  • Use for secondary actions (including adjacent to a primary), toolbars, or inline within complex components.
  • Always reserve sufficient space surrounding the button to separate each from multiple instances and nearby elements.
  • Disabled buttons must have the disabled attribute to prevent functionality. The comet-button--disabled class only provides styling.

Small

<button class="comet-button comet-button--primary comet-button--small">
    Get Started
</button>
                
{{ comet.button(variations=["primary", "small"], text="Get Started") }}
                
Macro params reference
.edit {
    @extend .comet-button;
    @extend .comet-button--primary;
    @extend .comet-button--small;
}

<button class="edit">Edit</button>
                
                
Disabled
<button class="comet-button comet-button--primary comet-button--small comet-button--disabled">
    Get Started
</button>
                
{{ comet.button(variations=["primary", "small", "disabled"], text="Get Started") }}
                
Macro params reference

Small buttons have reduced size and space between to allow for more dense displays.

  • Use sparingly for compact component displays dense with other elements, such as a mini-toolbar.
  • Avoid using as primary or secondary actions in page or dialog level decisions, such as previous/next and options within modal displays.
  • Disabled buttons must have the disabled attribute to prevent functionality. The comet-button--disabled class only provides styling.

Icon Only

Hover
<button class="comet-button comet-button--primary comet-button--icon-only" aria-label="Add User">
    <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
        <use xlink:href="/comet/comet_assets/comet.svg#user-add"></use>
    </svg>
    <span class="comet-screenreader-only">Add User</span>
</button>
                
{{ comet.button_icon(variations=["primary"], icon_name="user-add", aria_label="Add User") }}
                
Macro params reference
.get-started {
    @extend .comet-button;
    @extend .comet-button--primary;
}

<button class="get-started">Get Started</button>
                
                
Disabled
<button class="comet-button comet-button--primary comet-button--disabled comet-button--icon-only" aria-label="Add User">
    <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
        <use xlink:href="/comet/comet_assets/comet.svg#user-add"></use>
    </svg>
    <span class="comet-screenreader-only">Add User</span>
</button>
                
{{ comet.button_icon(variations=["primary", "disabled"], icon_name="user-add", aria_label="Add User") }}
                
Macro params reference

Icon buttons are useful for compact displays and toolbars for related actions and destinations.

  • Support icon concept meaning with a tooltip label on hover.
  • Avoid displaying separately in a group but spaced between. Instead, consider a Button Group.
  • Reverse icon fill and background color when supporting a toggled state.
  • Provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies via aria-label and the comet-screenreader-only class.
  • Icon only buttons require a title attribute to be compliant with accessability standards.
  • Disabled buttons must have the disabled attribute to prevent functionality. The comet-button--disabled class only provides styling.

Icon & Text

<button class="comet-button comet-button--primary comet-button--icon-with-text">
    <span class="comet-button__inner">
        <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#user-add"></use>
        </svg>
        <span class="comet-button__text">
            Add User
        </span>
    </span>
</button>
                
{{ comet.button_icon(variations=["primary"], icon_name="user-add", text="Add User") }}
                
Macro params reference
.get-started {
    @extend .comet-button;
    @extend .comet-button--primary;
}

<button class="get-started">Get Started</button>
                
                
<button class="comet-button comet-button--primary comet-button--icon-with-text">
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Continue
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#arrow-right"></use>
        </svg>
    </span>
</button>
                
{{ comet.button_icon(variations=["primary"], position="right", icon_name="arrow-right", text="Continue") }}
                
Macro params reference
.get-started {
    @extend .comet-button;
    @extend .comet-button--primary;
}

<button class="get-started">Get Started</button>
                
                
Disabled
<button class="comet-button comet-button--primary comet-button--disabled comet-button--icon-with-text">
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Continue
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#arrow-right"></use>
        </svg>
    </span>
</button>
                
{{ comet.button_icon(variations=["primary", "disabled"], position="right", icon_name="arrow-right", text="Continue") }}
                
Macro params reference

Icon & text buttons pair a (potentially less familiar) concept with label for enhanced clarity and recognition.

  • Pair icon with label when icon concepts are unfamiliar.
  • Pair icon with label to increase emphasis relative to surrounding elements.
  • Disabled buttons must have the disabled attribute to prevent functionality. The comet-button--disabled class only provides styling.

Split Button

Use a Split Button to create a primary action and a dropdown containing secondary actions.

  • Avoid when visibility of secondary actions should not be concealed. Use a Button Group instead.
  • Avoid when the actions are links to different pages. This is not a navigation component.
<div class="comet-button-group code-example-button" role="group">
    <button class="comet-button comet-button--primary">
        Primary Action
    </button>
    <button class="comet-button comet-button--primary comet-button--icon-xs comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover='split-button-example-1'>
        <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
        <span class="comet-screenreader-only">false</span>
    </button>
</div>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="split-button-example-1" data-comet-popover-align="right">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Secondary Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Secondary Action Two
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Secondary Action Three
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="comet-button-group code-example-button" role="group">
    <button class="comet-button comet-button--secondary">
        Primary Action
    </button>
    <button class="comet-button comet-button--secondary comet-button--icon-xs comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover='split-button-example-2'>
        <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
        <span class="comet-screenreader-only">false</span>
    </button>
</div>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="split-button-example-2" data-comet-popover-align="right">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Secondary Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Secondary Action Two
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Secondary Action Three
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{% call comet.button_group(class="code-example-button") %}
                        {{ comet.button(class="comet-button--primary", text="Primary Action") }}
                        {{ comet.button(
                                    class="comet-button--primary comet-button--icon-xs comet-dropdown-trigger js-comet-dropdown-trigger", 
                                    icon_left="triangle-down", 
                                    attrs="data-comet-popover='split-button-example-1'") }}
                    {% endcall %}
                    {{ comet.dropdown_menu(
                        menu_alignment="right",
                        id="split-button-example-1",
                        menu_items=[
                            {
                                label: "Secondary Action One",
                                href: "#"
                            },
                            {
                                label: "Secondary Action Two",
                                href: "#"
                            },
                            {
                                label: "Secondary Action Three",
                                href: "#"
                            }
                        ]
                    ) }}

                    {% call comet.button_group(class="code-example-button") %}
                        {{ comet.button(class="comet-button--secondary", text="Primary Action") }}
                        {{ comet.button(
                                    class="comet-button--secondary comet-button--icon-xs comet-dropdown-trigger js-comet-dropdown-trigger", 
                                    icon_left="triangle-down", 
                                    attrs="data-comet-popover='split-button-example-2'") }}
                    {% endcall %}
                    {{ comet.dropdown_menu(
                        menu_alignment="right",
                        id="split-button-example-2",
                        menu_items=[
                            {
                                label: "Secondary Action One",
                                href: "#"
                            },
                            {
                                label: "Secondary Action Two",
                                href: "#"
                            },
                            {
                                label: "Secondary Action Three",
                                href: "#"
                            }
                        ]
                    ) }}
                
Macro params reference

Toggle Button

Use a Toggle Button to show a persistent active state when a button is clicked.

<input id="comet-button-id--33671" type="checkbox" class="comet-button__input" />
<label class="comet-button comet-button--primary code-example-button comet-button--toggle" role="button" for="comet-button-id--33671">
    Toggle
</label>
<input id="comet-button-id--93509" type="checkbox" class="comet-button__input" />
<label class="comet-button comet-button--secondary code-example-button comet-button--toggle" role="button" for="comet-button-id--93509">
    Toggle
</label>
<input id="comet-button-id--74930" type="checkbox" class="comet-button__input" />
<label class="comet-button comet-button--ghost code-example-button comet-button--toggle" role="button" for="comet-button-id--74930">
    Toggle
</label>
<input id="comet-button-id--10192" type="checkbox" class="comet-button__input" />
<label class="comet-button comet-button--flat code-example-button comet-button--toggle" role="button" for="comet-button-id--10192">
    Toggle
</label>
                
{{ comet.button(class="comet-button--primary code-example-button", el="checkbox", text="Toggle") }}{{ comet.button(class="comet-button--secondary code-example-button", el="checkbox", text="Toggle") }}{{ comet.button(class="comet-button--ghost code-example-button", el="checkbox", text="Toggle") }}{{ comet.button(class="comet-button--flat code-example-button", el="checkbox", text="Toggle") }}
                
Macro params reference
  • Do Image

    use a toggle button when toggling a true or false state within a UI.

  • Do Image

    use as a replacement for a checkbox on a form. Use a checkbox input.

Class Reference

Class Applies to Outcome

.comet-button

<button>, <a>, or <input type=”submit” />

Initializes an element to contain base button styles. Must be paired with a variation.

.comet-button--primary

.comet-button

Displays a primary button when paired with .comet-button.

.comet-button--disabled

.comet-button

Results in a disabled state. This is only a style change. Disable the button in markup with with <button disabled>.

.comet-button--secondary

.comet-button

Displays a secondary button when paired with .comet-button.

.comet-button--ghost

.comet-button

Displays a ghost button when paired with .comet-button

.comet-button--flat

.comet-button

Displays a flat button when paired with .comet-button.

.comet-button--small

.comet-button

Squishes inset space to result in a smaller button.

.comet-button--icon

Any variation of .comet-button

Displays a button with that can contain an icon when paired with any variation of .comet-button

.comet-button--icon__icon

svg

Displays medium-sized icon inside button. Can be placed on the left or right of .comet-button--icon__text.

.comet-button--icon__text

<span>

Displays text aligned with a .comet-button--icon__icon and adds proper spacing.

Macro Params Reference

Param Default Values Description

variations

[]

Array of strings

variations to be applied to the button

text

false

String

The text to be displayed on the button

el

button

button, a, or input

Type of element rendered as a button

href

''

String

URL that button links to. Only valid if el='a'

class

''

String

Additional classes added to the button

icon_name

false

String

The name of any icon in the library, alias for icon_left

icon_left

false

String

The name of a Comet icon that will appear to the left of any button text

icon_right

false

String

The name of a Comet icon that will appear to the right of any button text

checked

false

true or false

If using “radio” or “checkbox” for the el attribute, setting checked=true will cause the button to have an active state by default

aria_label

''

String

Describes the action of the button if there is no text

Navigation Menu