2 Buttons

Button and Button Links are used to indicate primary, secondary and tertiary actions on a page. Used in patterns like page headers, modals and wizards. See Patterns & Layouts for examples of usage.

2.1.1 Primary Button

The primary button should be used for the primary record actions on the page and is generally found in the upper right quadrant of the actionable area, usually the tool bar, i.e. “Save”.

 <button class="btn btn-lg btn-primary">
   Primary Button
 </button>

2.1.2 Secondary Button

The secondary button should be used for any secondary, but important, actions on the page and is generally found in the upper right quadrant of the actionable area besides the “Save” primary button. Examples include “Add” in a popover or “Invite” in Team Management.

 <button class="btn btn-lg btn-default">
   Secondary Button
 </button>

2.2 Back Buttons

A majority of buttons in the site are built from the same base class.

 <button class="btn btn-lg btn-subordinate">
   <span class="hyicon hyicon-back"></span> BACK
 </button>

2.3 Buttons (Input Type)

Input Type File needs special markup to get skinned in a proper way. You can use this with all available btn modifier classes

Upload File Button 
 <div class="file-selector">
   <span class="btn btn-default btn-lg">
     <span>Upload File Button</span>
     <input type="file" multiple="" ng-file-select="">
  </span>
 </div>

2.4 Button Icon

You can use an Icon as a button, just add class button-icon to icon element and the icon with get the corresponding visual style. 

<span class="hyicon hyicon-feedback button-icon"></span>

2.4.1 Delete Link

The Delete link is used to indicate removal of records from the system. Delete is represented by a red link, typically placed on the lower right quadrant of the actionable area. Any action analogous to Cancel or Undo should use the secondary action style.

 <button class="btn btn-lg btn-danger">
   DELETE LINK
 </button>

2.4.2 Cancel Link

Cancel is to be styled as a link as it's a tertiary action. Use Cancel to denote discard updates to the current form or action and return to the immediate previous state/page/form. Cancel is NOT 'Clear' but the end result is the same in that any updates to the current page are discarded

 <button class="btn btn-lg btn-subordinate">
   CANCEL LINK
 </button>

2.4.3 Button Link

Button Link is to be styled as a link as it's a tertiary action. Use Button to denote discard updates to the current form or action and return to the immediate previous state/page/form. Cancel is NOT 'Clear' but the end result is the same in that any updates to the current page are discarded

 <button class="btn btn-lg btn-link">
   BUTTON LINK
 </button>

2.5 Grouped Buttons

Grouped buttons are a horizontal control of multiple segments. Each segment is a button, use them to indicate that they are related.

 <div data-toggle="buttons" class="btn-group">
   <label class="btn btn-segmented btn-lg {$modifiers} ">
     <input type="radio" id="option1" name="options"> Action
  </label>
  <label class="btn btn-segmented btn-lg active {$modifiers} ">
     <input type="radio" id="option2" name="options"> Action
  </label>
   <label class="btn btn-segmented btn-lg {$modifiers} ">
     <input type="radio" id="option3" name="options"> Action
  </label>
 </div>

2.6 Add Button

 <button class="y-add-btn" type="button">
   <span class="hyicon hyicon-add"></span>
   Value
 </button>

2.7 Small Toggle

Use the Small Toggle component when the toggle action is a secondary or tertiary action on a page, or is inline with text.

<span class="y-toggle">
  <input type="checkbox" id="toggleid"/>
  <label for="toggleid" class="control-label">Labeltext (optional)</label>
</span>

2.8 Large Toggle

Use the Large Toggle component when the toggle action is a primary action on a page or to turn on/off secondary actions on the page.

<span class="y-toggle y-toggle-lg">
  <input type="checkbox" id="toggleidlg"/>
  <label for="toggleidlg" data-activelabel="|" data-inactivelabel="O" class="control-label">Labeltext (optional)</label>
</span>

2.9 Back to top

Use the standard 'back to top' component on infinite scroll pages or pages that have data sets longer than 25 records.

<span  class="hyicon hyicon-top back-to-top"></span>