Pill

Pill is a design system component used to display a small numerical indicator, usually positioned near another element, such as an icon or a button. It provides users with quick, at-a-glance information about counts or notifications, like unread messages or pending tasks.

Live code

Example

Copy code

Open Sandbox

Reset demo

Storybook

Storybook failed to load. Please connect to the VPN to access.

Usage

Pill

Pills can be used to show count or label.


                                                
                                                import { Pill } from '@lmc-eu/spirit-web-react';


                                                
                                                  <Pill color="selected">333</Pill>
                                                  <Pill color="neutral">333</Pill>
                                                  <Pill color="success">3</Pill>
                                                  <Pill color="informative">3</Pill>
                                                  <Pill color="warning">3</Pill>
                                                  <Pill color="danger">3</Pill>

API

Name	Type	Default	Required	Description
children	ReactNode	—	✓	Content of the Pill
color	[Emotion Color dictionary \| selected \| neutral]	selected	✕	Color of the component

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

For detailed information see Pill component