Pill

Static label or count in a rounded container

Live code

Example

Copy code

Open Sandbox

Reset demo

Storybook

Usage

Pill

Pills can be used to show count or label.


                                                
                                                import { Pill } from '@alma-oss/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	[EmotionColorNamesType \| 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