Labels

Display complementary information such as metadata or filters.

Preview

Default Label General Label General Label Alert Label Warning Label Success Label

Variants

Labels are styled with class="fsa-label fsa-label--[VARIANT] fsa-label--[SIZE]".

Read-only: use a <span> element.
Invoke an action: use a <button> element.
Navigate somewhere: use an <a> elment.

<span class="fsa-label">Label</span>
<button class="fsa-label" type="button">Label</button>
<a class="fsa-label" href="/link.html">Label</a>

Default

Default Label

<span class="fsa-label">Default Label</span>

Dismissable

Label

<span class="fsa-label fsa-label--dismissable">
  Label
  <button class="fsa-label__remove" aria-label="Remove" title="Remove"></button>
</span>

Neutral

Neutral Label

<span class="fsa-label fsa-label--neutral">Neutral Label</span>

General

General Label

<span class="fsa-label fsa-label--general">General Label</span>

Alert

Alert Label

<span class="fsa-label fsa-label--alert">Alert Label</span>

Warning

Warning Label

<span class="fsa-label fsa-label--warning">Warning Label</span>

Success

Success Label

<span class="fsa-label fsa-label--success">Success Label</span>

Large

Large Default Large Neutral Large General Large Alert Large Warning Large Success

<div class="fsa-level">
  <span class="fsa-label fsa-label--large">Large Default</span>
  <span class="fsa-label fsa-label--neutral fsa-label--large">Large Neutral</span>
  <span class="fsa-label fsa-label--general fsa-label--large">Large General</span>
  <span class="fsa-label fsa-label--alert fsa-label--large">Large Alert</span>
  <span class="fsa-label fsa-label--warning fsa-label--large">Large Warning</span>
  <span class="fsa-label fsa-label--success fsa-label--large">Large Success</span>
</div>

Extra Large

Label Label Label Label Label Label

<div class="fsa-level">
  <span class="fsa-label fsa-label--extra-large">Label</span>
  <span class="fsa-label fsa-label--neutral fsa-label--extra-large">Label</span>
  <span class="fsa-label fsa-label--general fsa-label--extra-large">Label</span>
  <span class="fsa-label fsa-label--alert fsa-label--extra-large">Label</span>
  <span class="fsa-label fsa-label--warning fsa-label--extra-large">Label</span>
  <span class="fsa-label fsa-label--success fsa-label--extra-large">Label</span>
</div>

Actionable

Label styles can be applied to nearly any HTML element, defaulting to non-actionable <span> elements as shown above. Below are <a> and <button> elements:

Anchor

<div class="fsa-level">
  <a class="fsa-label" href="/link.html">Anchor</a>
  <button class="fsa-label" type="button">Button</button>
  <button class="fsa-label" type="button" disabled="disabled">Disabled Button</button>
</div>

Example: Dark Background

Default General General Alert Warning Success

Usage

Use

When an application would like to flag or call attention to content within an application.

Don’t Use

As a button or as any type of navigation.

General Guidance

Labels can be used as a call to bring attention or to categorize content.
Labels can be used to style Tags is used within an application.

Overview