UI Components
Alert Boxes pre-alpha

General Rules

Placement

Alert Boxes should be placed at the top of the affected area. So, for example, if you have a page with a form along with other elements, and the info box refers to the form, the information box should be placed directly above the form.

Wording

The top header should be a very short, human readable explanation of the information box. This header should be something that everyone can understand, reguardless of their familairity with the Alation platform and terminology.

The description should be a explaination of the reason why this information box is showing. It is ok to use some Alation specific terminology here, however it should be as short as possible, and we should generally stay away from technical jargon.

See the Voice & Tone section of these guidelines for more guidance.

Info

Example

<UIAlertBox
   type='info'
   header='Profiling in progress'
   subheader='1,213 tables are currently being profiled'
   icon='ellipsis'/>

Usage

The Info Alert box should be used in informational or neutral contexts.

Win

Example

<UIAlertBox
   type='win'
   header='Profiling Successful. Win!'
   subheader='1,213 tables successfully profiled'
   icon='check'/>

Usage

The Win Alert box should be used in positive contexts.

It should only be used when the boxes contents are not ephemeral in nature. For all other uses, use a Toast message.

Warning

Example

<UIAlertBox
   type='warning'
   header='Be careful before using this'
   subheader='Someone has put a warning on this table. Find out more...'
   icon='stop'/>

Usage

The Warning Alert box should be used in contexts where nothing has gone wrong yet, but the user should proceed with caution.

Fail

Example

<UIAlertBox
   type='fail'
   header='You probably shouldn't use this...
   subheader='This table has been deprecated. Use npi.nppes_state instead. Find out more...'
   icon='stop'/>

Usage

The Fail Alert box should be used in contexts where something has gone wrong or where the user should not proceed.

In cases where this information box is showing because of something the user did, we should always direct the user as to how to remedy the situation. In other cases we should always give a way for a user to get more information on the error.

Toast

Example

<UIToast />

Usage

Toast Alerts should be used for transitive, non-persistent alerts such as an article body being saved. These alerts go away after a few seconds, so don't put anything in these that you absolutely need the user to see and act upon.

Changelog

  • November 7, 2016 - Added Toast
  • July 20, 2016 - Updated code snippets and added example images as placeholders