Skip to main content Skip to navigation
View Navigation Comet

Buttons

Use buttons to perform many important actions throughout the experience.

Default

Hover

HTML

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>

Macro

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

Copy to Clipboard Press Ctrl + C to copy 
<button class="comet-button comet-button--primary comet-button--disabled">
    Disabled
</button>

Macro

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

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>

Macro

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

Copy to Clipboard Press Ctrl + C to copy 
<button class="comet-button comet-button--ghost comet-button--disabled">
    Disabled
</button>

Macro

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

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>

Macro

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

Copy to Clipboard Press Ctrl + C to copy 
<button class="comet-button comet-button--flat comet-button--disabled">
    Disabled
</button>

Macro

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

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>

Macro

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

Copy to Clipboard Press Ctrl + C to copy 
<button class="comet-button comet-button--pill comet-button--disabled">
    Get Started
</button>

Macro

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

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>

Macro

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

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>

Macro

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

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>

Macro

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

Copy to Clipboard Press Ctrl + C to copy 
<button class="comet-button comet-button--primary comet-button--small comet-button--disabled">
    Get Started
</button>

Macro

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

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>

Macro

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

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>

Macro

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

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>

Macro

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

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>

Macro

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

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>

Macro

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

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>

Macro

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.

HTML

Copy to Clipboard Press Ctrl + C to copy 
<input id="comet-button-id--33865" 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--33865">
    Toggle
</label>
<input id="comet-button-id--54429" 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--54429">
    Toggle
</label>
<input id="comet-button-id--23241" 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--23241">
    Toggle
</label>
<input id="comet-button-id--40398" 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--40398">
    Toggle
</label>

Macro

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

Component Explorer

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

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1