Buttons | ClearView Design System

Primary Buttons

Primary

<button type="button" class="btn btn-primary">Button</button>

Primary Disabled

<button type="button" class="btn btn-primary" disabled>Button</button>

Primary with Icon

<button type="button" class="btn btn-primary btn-icon">
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With Icon
</button>

Primary Disabled with Icon

<button type="button" class="btn btn-primary btn-icon" disabled>
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With Icon
</button>

Secondary Buttons

Secondary

<button type="button" class="btn btn-secondary">Button</button>

Secondary Disabled

<button type="button" class="btn btn-secondary" disabled>Button</button>

Secondary with Icon

<button type="button" class="btn btn-secondary btn-icon">
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With icon
</button>

Secondary Disabled with Icon

<button type="button" class="btn btn-secondary btn-icon" disabled>
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With icon
</button>

Text Buttons

Text

<button type="button" class="btn btn-text">Button</button>

Text Disabled

<button type="button" class="btn btn-text" disabled>Button</button>

Text with Icon

<button type="button" class="btn btn-text btn-icon fill-cerulean">
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
   Button
</button>

Text Disabled with Icon

<button type="button" class="btn btn-text btn-icon fill-cerulean" disabled>
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
   Button
</button>

Gray Text Buttons

Gray Text

<button type="button" class="btn btn-text-gray btn-icon">
  <svg>
    <use href="../App_Themes/clearview-default/icons/utility/arrow-left.svg#arrow-left"></use>
  </svg>
  Button
</button>

Gray Text Disabled

<button type="button" class="btn btn-text-gray btn-icon" disabled>
  <svg>
    <use href="../App_Themes/clearview-default/icons/utility/arrow-left.svg#arrow-left"></use>
  </svg>
  Button
</button>

Small Primary Buttons

Small Primary

<button type="button" class="btn btn-primary btn-sm">Button</button>

Small Primary Disabled

<button type="button" class="btn btn-primary btm-sm" disabled>Button</button>

Small Primary with Icon

<button type="button" class="btn btn-primary btn-sm btn-icon">
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With icon
</button>

Small Primary Disabled with Icon

<button type="button" class="btn btn-primary btn-sm btn-icon" disabled>
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With icon
</button>

Small Secondary Buttons

Small Secondary

<button type="button" class="btn btn-secondary btn-sm">Button</button>

Small Secondary Disabled

<button type="button" class="btn btn-secondary btn-sm" disabled>Button</button>

Small Secondary with Icon

<button type="button" class="btn btn-secondary btn-sm btn-icon">
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With icon
</button>

Small Secondary Disabled with Icon

<button type="button" class="btn btn-secondary btn-sm btn-icon" disabled>
    <svg>
        <use href="../App_Themes/clearview-default/icons/utility/add.svg#add"></use>
    </svg>
    With icon
</button>

Combo Buttons

Combo

<button type="button" class="btn btn-text mr-2">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>

Combo Disabled

<button type="button" class="btn btn-text mr-2" disabled>Cancel</button>
<button type="button" class="btn btn-primary" disabled>Save</button>

Icon-Only Buttons

Icon-Only Button

<button type="button" class="icon-btn fill-valyrianSteel fill-hover-whaleTail">
    <svg class="icon-24">
        <use href="../App_Themes/clearview-default/icons/utility/close.svg#close"></use>
    </svg>
</button>

Icon-Only Button Disabled

<button type="button" class="icon-btn fill-valyrianSteel fill-hover-whaleTail" disabled>
    <svg class="icon-24">
        <use href="../App_Themes/clearview-default/icons/utility/close.svg#close"></use>
    </svg>
</button>

Add Buttons

Add Button 16px

<button type="button" class="icon-btn">
    <img src="../App_Themes/clearview-default/icons/utility/add-16px.svg">
</button>

Add Button 16px Disabled

<button type="button" class="icon-btn" disabled>
    <img src="../App_Themes/clearview-default/icons/utility/add-16px.svg">
</button>

Add Button 24px

<button type="button" class="icon-btn">
    <img src="../App_Themes/clearview-default/icons/utility/add-24px.svg">
</button>

Add Button 24px Disabled

<button type="button" class="icon-btn" disabled>
    <img src="../App_Themes/clearview-default/icons/utility/add-24px.svg">
</button>

Remove Buttons

Remove Button 16px

<button type="button" class="icon-btn">
    <img src="../App_Themes/clearview-default/icons/utility/remove-16px.svg">
</button>

Remove Button 16px Disabled

<button type="button" class="icon-btn" disabled>
    <img src="../App_Themes/clearview-default/icons/utility/remove-16px.svg">
</button>

Remove Button 24px

<button type="button" class="icon-btn">
    <img src="../App_Themes/clearview-default/icons/utility/remove-24px.svg">
</button>

Remove Button 24px Disabled

<button type="button" class="icon-btn" disabled>
    <img src="../App_Themes/clearview-default/icons/utility/remove-24px.svg">
</button>