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.

Markdown docs

Pill

This is Twig implementation of the Pill component.

Basic example usage:


                                                
                                                <Pill>3</Pill>

Advanced example usage:


                                                
                                                <Pill color="warning" elementType="div">333</Pill>

Without lexer:


                                                
                                                {% embed "@spirit/pill.twig" with { props: {
                                                    color: 'selected'
                                                    elementType: 'div'
                                                }} %}
                                                    {% block content %}
                                                          333
                                                    {% endblock %}
                                                {% endembed %}

API

Name	Type	Default	Required	Description
color	[Emotion Color dictionary \| selected \| neutral]	selected	✕	Color variant
elementType	string	span	✕	HTML tag to render

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.

Pill

Markdown docs

Pill

API

Example