Skip to content

Latest commit

 

History

History
46 lines (35 loc) · 1.16 KB

File metadata and controls

46 lines (35 loc) · 1.16 KB

Label Group

A label group is a collection of labels that can be grouped by category and used to represent one or more values assigned to a single attribute. When the number of labels exceeds the configured limit, additional labels are hidden under an overflow indicator.

Read more about Label Group in the PatternFly Elements Label Group documentation

Installation

Load <pf-label-group> via CDN:

<script src="https://jspm.dev/@patternfly/elements/pf-label-group/pf-label-group.js"></script>

Or, if you are using NPM, install it

npm install @patternfly/elements

Then once installed, import it to your application:

import '@patternfly/elements/pf-label-group/pf-label-group.js';

Usage

<pf-label-group>
  <pf-label color="blue">Security</pf-label>
  <pf-label color="green">Performance</pf-label>
  <pf-label color="red">Networking</pf-label>
</pf-label-group>

With a category:

<pf-label-group>
  <span slot="category">Filters</span>
  <pf-label removable>Security</pf-label>
  <pf-label removable>Performance</pf-label>
</pf-label-group>