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.

Usage

Pill

Variants:


                                                
                                                <span class="Pill Pill--selected">333</span>
                                                <span class="Pill Pill--neutral">333</span>
                                                <span class="Pill Pill--success">3</span>
                                                <span class="Pill Pill--informative">3</span>
                                                <span class="Pill Pill--warning">3</span>
                                                <span class="Pill Pill--danger">3</span>

Longer content:


                                                
                                                <span class="Pill Pill--selected">333</span>