Comet Buttons

Default

Hover

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--primary">
    Primary
</button>
<button class="comet-button comet-button--secondary">
    Secondary
</button>
<button class="comet-button comet-button--science">
    Science
</button>
<button class="comet-button comet-button--math">
    Math
</button>
<button class="comet-button comet-button--ss">
    Social Studies
</button>
<button class="comet-button comet-button--stem">
    Stem
</button>
<button class="comet-button comet-button--coding">
    Coding
</button>
<button class="comet-button comet-button--espresso">
    Espresso
</button>
<button class="comet-button comet-button--health-relationships">
    Health & Relationships
</button>
<button class="comet-button comet-button--uk-secondary">
    UK Secondary
</button>
<button class="comet-button comet-button--success">
    Success
</button>
<button class="comet-button comet-button--danger">
    Danger
</button>
<button class="comet-button comet-button--warning">
    Warning
</button>
<button class="comet-button comet-button--new">
    New
</button>
<button class="comet-button comet-button--light">
    Light
</button>
<button class="comet-button comet-button--dark">
    Dark
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["primary"], text="Primary") }}
        {{ comet.button(variations=["secondary"], text="Secondary") }}
        {{ comet.button(variations=["science"], text="Science") }}
        {{ comet.button(variations=["math"], text="Math") }}
        {{ comet.button(variations=["ss"], text="Social Studies") }}
        {{ comet.button(variations=["stem"], text="Stem") }}
        {{ comet.button(variations=["coding"], text="Coding") }}
        {{ comet.button(variations=["espresso"], text="Espresso") }}
        {{ comet.button(variations=["health-relationships"], text="Health & Relationships") }}
        {{ comet.button(variations=["uk-secondary"], text="UK Secondary") }}
        {{ comet.button(variations=["success"], text="Success") }}
        {{ comet.button(variations=["danger"], text="Danger") }}
        {{ comet.button(variations=["warning"], text="Warning") }}
        {{ comet.button(variations=["new"], text="New") }}
        {{ comet.button(variations=["light"], text="Light") }}
        {{ comet.button(variations=["dark"], text="Dark") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--primary comet-button--disabled">
    Disabled
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["primary", "disabled"], text="Disabled") }}
                
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.

Ghost

Hover

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--ghost comet-button--primary">
    Primary
</button>
<button class="comet-button comet-button--ghost comet-button--secondary">
    Secondary
</button>
<button class="comet-button comet-button--ghost comet-button--science">
    Science
</button>
<button class="comet-button comet-button--ghost comet-button--math">
    Math
</button>
<button class="comet-button comet-button--ghost comet-button--ss">
    Social Studies
</button>
<button class="comet-button comet-button--ghost comet-button--stem">
    Stem
</button>
<button class="comet-button comet-button--ghost comet-button--coding">
    Coding
</button>
<button class="comet-button comet-button--ghost comet-button--espresso">
    Espresso
</button>
<button class="comet-button comet-button--ghost comet-button--health-relationships">
    Health & Relationships
</button>
<button class="comet-button comet-button--ghost comet-button--uk-secondary">
    UK Secondary
</button>
<button class="comet-button comet-button--ghost comet-button--success">
    Success
</button>
<button class="comet-button comet-button--ghost comet-button--danger">
    Danger
</button>
<button class="comet-button comet-button--ghost comet-button--warning">
    Warning
</button>
<button class="comet-button comet-button--ghost comet-button--new">
    New
</button>
<button class="comet-button comet-button--ghost comet-button--light">
    Light
</button>
<button class="comet-button comet-button--ghost comet-button--dark">
    Dark
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["ghost", "primary"], text="Primary") }}
                 {{ comet.button(variations=["ghost", "secondary"], text="Secondary") }}
                 {{ comet.button(variations=["ghost", "science"], text="Science") }}
                 {{ comet.button(variations=["ghost", "math"], text="Math") }}
                 {{ comet.button(variations=["ghost", "ss"], text="Social Studies") }}
                 {{ comet.button(variations=["ghost", "stem"], text="Stem") }}
                 {{ comet.button(variations=["ghost", "coding"], text="Coding") }}
                 {{ comet.button(variations=["ghost", "espresso"], text="Espresso") }}
                 {{ comet.button(variations=["ghost", "health-relationships"], text="Health & Relationships") }}
                 {{ comet.button(variations=["ghost", "uk-secondary"], text="UK Secondary") }}
                 {{ comet.button(variations=["ghost", "success"], text="Success") }}
                 {{ comet.button(variations=["ghost", "danger"], text="Danger") }}
                 {{ comet.button(variations=["ghost", "warning"], text="Warning") }}
                 {{ comet.button(variations=["ghost", "new"], text="New") }}
                 {{ comet.button(variations=["ghost", "light"], text="Light") }}
                 {{ comet.button(variations=["ghost", "dark"], text="Dark") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--ghost comet-button--disabled">
    Disabled
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["ghost", "disabled"], text="Disabled") }}
                
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

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--flat comet-button--primary">
    Primary
</button>
<button class="comet-button comet-button--flat comet-button--secondary">
    Secondary
</button>
<button class="comet-button comet-button--flat comet-button--science">
    Science
</button>
<button class="comet-button comet-button--flat comet-button--math">
    Math
</button>
<button class="comet-button comet-button--flat comet-button--ss">
    Social Studies
</button>
<button class="comet-button comet-button--flat comet-button--stem">
    Stem
</button>
<button class="comet-button comet-button--flat comet-button--coding">
    Coding
</button>
<button class="comet-button comet-button--flat comet-button--espresso">
    Espresso
</button>
<button class="comet-button comet-button--flat comet-button--health-relationships">
    Health & Relationships
</button>
<button class="comet-button comet-button--flat comet-button--uk-secondary">
    UK Secondary
</button>
<button class="comet-button comet-button--flat comet-button--success">
    Success
</button>
<button class="comet-button comet-button--flat comet-button--danger">
    Danger
</button>
<button class="comet-button comet-button--flat comet-button--warning">
    Warning
</button>
<button class="comet-button comet-button--flat comet-button--new">
    New
</button>
<button class="comet-button comet-button--flat comet-button--light">
    Light
</button>
<button class="comet-button comet-button--flat comet-button--dark">
    Dark
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["flat", "primary"], text="Primary") }}
                 {{ comet.button(variations=["flat", "secondary"], text="Secondary") }}
                 {{ comet.button(variations=["flat", "science"], text="Science") }}
                 {{ comet.button(variations=["flat", "math"], text="Math") }}
                 {{ comet.button(variations=["flat", "ss"], text="Social Studies") }}
                 {{ comet.button(variations=["flat", "stem"], text="Stem") }}
                 {{ comet.button(variations=["flat", "coding"], text="Coding") }}
                 {{ comet.button(variations=["flat", "espresso"], text="Espresso") }}
                 {{ comet.button(variations=["flat", "health-relationships"], text="Health & Relationships") }}
                 {{ comet.button(variations=["flat", "uk-secondary"], text="UK Secondary") }}
                 {{ comet.button(variations=["flat", "success"], text="Success") }}
                 {{ comet.button(variations=["flat", "danger"], text="Danger") }}
                 {{ comet.button(variations=["flat", "warning"], text="Warning") }}
                 {{ comet.button(variations=["flat", "new"], text="New") }}
                 {{ comet.button(variations=["flat", "light"], text="Light") }}
                 {{ comet.button(variations=["flat", "dark"], text="Dark") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--flat comet-button--disabled">
    Disabled
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["flat", "disabled"], text="Disabled") }}
                
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.

Pill

Hover

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--pill comet-button--primary">
    Primary
</button>
<button class="comet-button comet-button--pill comet-button--secondary">
    Secondary
</button>
<button class="comet-button comet-button--pill comet-button--science">
    Science
</button>
<button class="comet-button comet-button--pill comet-button--math">
    Math
</button>
<button class="comet-button comet-button--pill comet-button--ss">
    Social Studies
</button>
<button class="comet-button comet-button--pill comet-button--stem">
    Stem
</button>
<button class="comet-button comet-button--pill comet-button--coding">
    Coding
</button>
<button class="comet-button comet-button--pill comet-button--espresso">
    Espresso
</button>
<button class="comet-button comet-button--pill comet-button--health-relationships">
    Health & Relationships
</button>
<button class="comet-button comet-button--pill comet-button--uk-secondary">
    UK Secondary
</button>
<button class="comet-button comet-button--pill comet-button--success">
    Success
</button>
<button class="comet-button comet-button--pill comet-button--danger">
    Danger
</button>
<button class="comet-button comet-button--pill comet-button--warning">
    Warning
</button>
<button class="comet-button comet-button--pill comet-button--new">
    New
</button>
<button class="comet-button comet-button--pill comet-button--light">
    Light
</button>
<button class="comet-button comet-button--pill comet-button--dark">
    Dark
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["pill", "primary"], text="Primary") }}
        {{ comet.button(variations=["pill", "secondary"], text="Secondary") }}
        {{ comet.button(variations=["pill", "science"], text="Science") }}
        {{ comet.button(variations=["pill", "math"], text="Math") }}
        {{ comet.button(variations=["pill", "ss"], text="Social Studies") }}
        {{ comet.button(variations=["pill", "stem"], text="Stem") }}
        {{ comet.button(variations=["pill", "coding"], text="Coding") }}
        {{ comet.button(variations=["pill", "espresso"], text="Espresso") }}
        {{ comet.button(variations=["pill", "health-relationships"], text="Health & Relationships") }}
        {{ comet.button(variations=["pill", "uk-secondary"], text="UK Secondary") }}
        {{ comet.button(variations=["pill", "success"], text="Success") }}
        {{ comet.button(variations=["pill", "danger"], text="Danger") }}
        {{ comet.button(variations=["pill", "warning"], text="Warning") }}
        {{ comet.button(variations=["pill", "new"], text="New") }}
        {{ comet.button(variations=["pill", "light"], text="Light") }}
        {{ comet.button(variations=["pill", "dark"], text="Dark") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--pill comet-button--disabled">
    Get Started
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["pill", "disabled"], text="Get Started") }}
                
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.

FAB

Hover

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--fab 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>
<button class="comet-button comet-button--fab comet-button--secondary 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>
<button class="comet-button comet-button--fab comet-button--science 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>
<button class="comet-button comet-button--fab comet-button--math 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>
<button class="comet-button comet-button--fab comet-button--ss 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>
<button class="comet-button comet-button--fab comet-button--stem 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>
<button class="comet-button comet-button--fab comet-button--coding 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>
<button class="comet-button comet-button--fab comet-button--espresso 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>
<button class="comet-button comet-button--fab comet-button--health-relationships 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>
<button class="comet-button comet-button--fab comet-button--uk-secondary 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>
<button class="comet-button comet-button--fab comet-button--success 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>
<button class="comet-button comet-button--fab comet-button--danger 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>
<button class="comet-button comet-button--fab comet-button--warning 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>
<button class="comet-button comet-button--fab comet-button--new 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>
<button class="comet-button comet-button--fab comet-button--light 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>
<button class="comet-button comet-button--fab comet-button--dark 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>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["fab", "primary"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "secondary"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "science"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "math"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "ss"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "stem"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "coding"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "espresso"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "health-relationships"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "uk-secondary"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "success"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "danger"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "warning"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "new"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "light"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["fab", "dark"], icon_name="user-add", aria_label="Add User") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--fab 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>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["fab", "disabled"], icon_name="user-add", aria_label="Add User") }}
                
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

Hover

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--small comet-button--primary">
    Primary
</button>
<button class="comet-button comet-button--small comet-button--secondary">
    Secondary
</button>
<button class="comet-button comet-button--small comet-button--science">
    Science
</button>
<button class="comet-button comet-button--small comet-button--math">
    Math
</button>
<button class="comet-button comet-button--small comet-button--ss">
    Social Studies
</button>
<button class="comet-button comet-button--small comet-button--stem">
    Stem
</button>
<button class="comet-button comet-button--small comet-button--coding">
    Coding
</button>
<button class="comet-button comet-button--small comet-button--espresso">
    Espresso
</button>
<button class="comet-button comet-button--small comet-button--health-relationships">
    Health & Relationships
</button>
<button class="comet-button comet-button--small comet-button--uk-secondary">
    UK Secondary
</button>
<button class="comet-button comet-button--small comet-button--success">
    Success
</button>
<button class="comet-button comet-button--small comet-button--danger">
    Danger
</button>
<button class="comet-button comet-button--small comet-button--warning">
    Warning
</button>
<button class="comet-button comet-button--small comet-button--new">
    New
</button>
<button class="comet-button comet-button--small comet-button--light">
    Light
</button>
<button class="comet-button comet-button--small comet-button--dark">
    Dark
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["small", "primary"], text="Primary") }}
        {{ comet.button(variations=["small", "secondary"], text="Secondary") }}
        {{ comet.button(variations=["small", "science"], text="Science") }}
        {{ comet.button(variations=["small", "math"], text="Math") }}
        {{ comet.button(variations=["small", "ss"], text="Social Studies") }}
        {{ comet.button(variations=["small", "stem"], text="Stem") }}
        {{ comet.button(variations=["small", "coding"], text="Coding") }}
        {{ comet.button(variations=["small", "espresso"], text="Espresso") }}
        {{ comet.button(variations=["small", "health-relationships"], text="Health & Relationships") }}
        {{ comet.button(variations=["small", "uk-secondary"], text="UK Secondary") }}
        {{ comet.button(variations=["small", "success"], text="Success") }}
        {{ comet.button(variations=["small", "danger"], text="Danger") }}
        {{ comet.button(variations=["small", "warning"], text="Warning") }}
        {{ comet.button(variations=["small", "new"], text="New") }}
        {{ comet.button(variations=["small", "light"], text="Light") }}
        {{ comet.button(variations=["small", "dark"], text="Dark") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<button class="comet-button comet-button--primary comet-button--small comet-button--disabled">
    Get Started
</button>

Copy to Clipboard Press Ctrl + C to copy

{{ 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

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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>
<button class="comet-button comet-button--secondary 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>
<button class="comet-button comet-button--science 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>
<button class="comet-button comet-button--math 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>
<button class="comet-button comet-button--ss 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>
<button class="comet-button comet-button--stem 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>
<button class="comet-button comet-button--coding 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>
<button class="comet-button comet-button--espresso 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>
<button class="comet-button comet-button--health-relationships 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>
<button class="comet-button comet-button--uk-secondary 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>
<button class="comet-button comet-button--success 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>
<button class="comet-button comet-button--danger 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>
<button class="comet-button comet-button--warning 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>
<button class="comet-button comet-button--new 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>
<button class="comet-button comet-button--light 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>
<button class="comet-button comet-button--dark 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>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button(variations=["primary"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["secondary"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["science"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["math"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["ss"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["stem"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["coding"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["espresso"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["health-relationships"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["uk-secondary"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["success"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["danger"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["warning"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["new"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["light"], icon_name="user-add", aria_label="Add User") }}
        {{ comet.button(variations=["dark"], icon_name="user-add", aria_label="Add User") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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>

Copy to Clipboard Press Ctrl + C to copy

{{ 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

Hover

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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>
<button class="comet-button comet-button--secondary 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>
<button class="comet-button comet-button--science 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>
<button class="comet-button comet-button--math 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>
<button class="comet-button comet-button--ss 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>
<button class="comet-button comet-button--stem 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>
<button class="comet-button comet-button--coding 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>
<button class="comet-button comet-button--espresso 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>
<button class="comet-button comet-button--health-relationships 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>
<button class="comet-button comet-button--uk-secondary 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>
<button class="comet-button comet-button--success 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>
<button class="comet-button comet-button--danger 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>
<button class="comet-button comet-button--warning 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>
<button class="comet-button comet-button--new 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>
<button class="comet-button comet-button--light 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>
<button class="comet-button comet-button--dark 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>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button_icon(variations=["primary"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["secondary"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["science"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["math"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["ss"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["stem"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["coding"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["espresso"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["health-relationships"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["uk-secondary"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["success"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["danger"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["warning"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["new"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["light"], icon_name="user-add", text="Add User") }}
        {{ comet.button_icon(variations=["dark"], icon_name="user-add", text="Add User") }}
                
Macro params reference

Hover

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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>
<button class="comet-button comet-button--secondary 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>
<button class="comet-button comet-button--science 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>
<button class="comet-button comet-button--math 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>
<button class="comet-button comet-button--ss 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>
<button class="comet-button comet-button--stem 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>
<button class="comet-button comet-button--coding 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>
<button class="comet-button comet-button--espresso 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>
<button class="comet-button comet-button--health-relationships 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>
<button class="comet-button comet-button--uk-secondary 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>
<button class="comet-button comet-button--success 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>
<button class="comet-button comet-button--danger 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>
<button class="comet-button comet-button--warning 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>
<button class="comet-button comet-button--new 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>
<button class="comet-button comet-button--light 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>
<button class="comet-button comet-button--dark 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>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.button_icon(variations=["primary"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["secondary"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["science"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["math"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["ss"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["stem"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["coding"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["espresso"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["health-relationships"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["uk-secondary"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["success"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["danger"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["warning"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["new"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["light"], position="right", icon_name="arrow-right", text="Continue") }}
        {{ comet.button_icon(variations=["dark"], position="right", icon_name="arrow-right", text="Continue") }}
                
Macro params reference

Disabled

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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>

Copy to Clipboard Press Ctrl + C to copy

{{ 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.

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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>

Copy to Clipboard Press Ctrl + C to copy

{% 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.

Toggle Toggle Toggle Toggle

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<input id="comet-button-id--77443" 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--77443">
    Toggle
</label>
<input id="comet-button-id--60727" 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--60727">
    Toggle
</label>
<input id="comet-button-id--80200" 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--80200">
    Toggle
</label>
<input id="comet-button-id--14283" 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--14283">
    Toggle
</label>

Copy to Clipboard Press Ctrl + C to copy

{{ 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

use a toggle button when toggling a true or false state within a UI.
use as a replacement for a checkbox on a form. Use a checkbox input.

Component Explorer

Toggle

Background Theme

Button Color

Button Shape

Button Style

Button Size

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