UI Components
Buttons alpha

Primary Button

Example ⚡


<UIButton
   style='primary'
   onClick={function(){};}>
   Button
</UIButton>

Usage

The primary button should be used for the default action in a form or fieldset. For each button set, there must be exactly one Primary Button.

If you want to put an icon with a button...

  • the icon should be displayed to the right of the button text
  • there should always be exactly one space (&nbsp;) after the button text and before the icon
  • there should only ever be one icon per button

Secondary Button

Example ⚡


<UIButton
   onClick={function(){};}>
   Button
</UIButton>

Usage

The secondary button should be used for actions which are not the default action (e.x. Cancel). The secondary button is not required to appear in a button group. There can be multiple secondary buttons, however we should always limit the number of buttons in a button group to the smallest amount prossible. Always ask yourself: Is this really needed? Do we need a button here?

If you want to put an icon with a button...

  • the icon should be displayed to the right of the button text
  • there should always be exactly one space (&nbsp;) after the button text and before the icon
  • there should only ever be one icon per button

Action Button

Example


<UIActionButton
   onClick={function(){};}>
   Upload...
</UIButton>

Usage

The action button should be used when a user has a choice of what actions to do. For example: Upload a CSV or TSV. This button should only be used with a Action Menu.

Primary + Action Button

Example


<UIActionButtonPrimary
   onClick={function(){};}
   data={}>
   New Query on MySQL
</UIActionButtonPrimary>

Usage

The Primary + Action button should only be used when...

  1. There is a default action that we want to promote (i.e. auto selecting a data source to query on)
  2. Selecting an item causes an action
  3. The button is not displayed inline

This button should only be used with a Action Menu.

The primary button should be intelligent. We should intelligently select what a user is most likely to do and put that action as the primary button.

Backstory

The Primary + Action Button saves the user time for repetitive actions as we preselect the most probable action.

Standard Text Button

Example


<UITextButton
   handleClick={function(){};}>
   Edit
</UITextButton>

Usage

The standard text button should be used when using Primary button would be too heavy/attention grabbing.

The standard text button should never be used as the primary button in a form or modal.

Large Text Button

Example


<UITextButton
   size='large'
   icon='trash'
   handleClick={function(){};}>
   Delete
</UITextButton>

Usage

The large text button was designed to be used at the document level of our containment model.

At any given time there should only be at max 4 large text buttons on a page. If there are more than 4 buttons you want to give the user, display what you think will be the 3 most used actions as individaul buttons, then put everything else under a More Large text button.

The More Large text button should...

  • Use "ellipsis" as the icon
  • Use "More..." as the text
  • Use a Action Menu to display the rest of the options

Changelog

  • December 9, 2016 - Promoted to Alpha and updated to automated docs
  • July 21, 2016 - Added Text button and Large Text Button
  • July 20, 2016 - Updated code snippets and added example images as placeholders
  • July 19, 2016 - Updated link to Action Menu