@patternfly/pfe-label v1.0.0-next.7

Label

An inline-block element component that provides a distinct visual style for metadata in a UI. Commonly used as visual representations for tags, labels can include an optional pfe-icon and are available in a solid and outline style variant.

Read more about Label in the PatternFly Elements Label documentation

Installation

Load <pfe-label> via CDN:

<script src="https://unpkg.com/@patternfly/pfe-label?module"></script>

Or, if you are using NPM, install it

npm install @patternfly/pfe-label

Then once installed, import it to your application:

import '@patternfly/pfe-label';

Usage

Default

<p>Some Text <pfe-label>Your label text here</pfe-label>

Color Options: grey (default), blue ,green, orange, red, purple, cyan

<p>Some Text <pfe-label color="red">Your label text here</pfe-label>

With and Icon:

<p>Some Text <pfe-label icon="web-icon-globe">Your label text here</pfe-label>

Outline variant:

<p>Some Text <pfe-label outline>Your label text here</pfe-label>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the a class.

<pfe-label color="red">
 Some text <span class="visually-hidden-class">Some additional info</span>
</pfe-label>