UI Components
Dropdowns alpha

Standard Dropdown

Example ⚡

    <div>100 rows</div>
    <div>200 rows</div>


The Standard Dropdown should only be used when the resulting activity after selecting an item from the dropdown does not cause an action (e.x. Show X rows).


The reason why there are two primary types of dropdowns deals with setting user expectations. If a user does not know that clicking on something will cause an action, they could be confused, leading to a poor user experience. From a visuals point of view, this button is sigificatnly lighter weight than the actionable button in order to direct the users eye to primary actions, while not distracting them.

Natural Language Dropdown


where <UIDropdownSentence default='steward' data={}/> is me


The natural language dropdown should only be used when...

  1. The dropdown is displayed inline as part of a sentence
  2. The dropdown is not at the end of a sentence
  3. Selecting an item from the dropdown does not cause an action (similar to Standard Dropdown)

The copy of the dropdown should be short and sweet.


Visually, putting a caret inline by default makes the display look cluttered, and takes away from the illusion that a user is crafting a natural sentence, not filling out a form.


  • December 9, 2016 - Promoted to Alpha and updated to automated docs
  • July 19, 2016 - Removed Action Menu, and moved it to the new Menus page and updated code snippets and added example images as placeholders