Pill

The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. With an onClick it is a button, and with pressed a toggle.

import { Pill } from '@basmilius/react-ui';

import { useState } from 'react';
import { CircleAlert, GitBranch } from 'lucide-react';
import { Icon, Pill } from '@basmilius/react-ui';

export default function PillDemo() {
    const [staged, setStaged] = useState(false);

    return (
        <div className="flex flex-col items-center gap-3">
            <div className="flex flex-wrap items-center gap-2">
                <Pill>12 files</Pill>
                <Pill tone="raised">Draft</Pill>
                <Pill tone="idle">Idle</Pill>
                <Pill tone="needsYou" icon={<Icon icon={CircleAlert} size={12} />}>
                    Needs you
                </Pill>
                <Pill tone="error">Failed</Pill>
                <Pill tone="accent">New</Pill>
            </div>
            <div className="flex flex-wrap items-center gap-2">
                <Pill mono icon={<Icon icon={GitBranch} size={12} />}>
                    feature/export
                </Pill>
                <Pill shape="tag" tone="accent">
                    Beta
                </Pill>
                <Pill pressed={staged} onClick={() => setStaged(!staged)}>
                    Staged only
                </Pill>
            </div>
        </div>
    );
}

The tone says what the label means about the thing it names. muted is the default, and raised lifts a label off a sunken header so it reads as a control. idle, needsYou and error use the status colors. A tag is tighter and bolder than a pill, for the end of a line of prose. mono suits a branch name or a count that is read character by character.

Props

Prop	Type	Default
children	ReactNode		Required.
icon	ReactNode		Drawn before the text; use a 12 pixel Icon.
tone	'muted' | 'raised' | 'idle' | 'needsYou' | 'error' | 'accent'	'muted'
shape	'pill' | 'tag'	'pill'
mono	boolean	false
onClick	() => void		Makes the pill a button.
pressed	boolean		Makes the button a toggle (aria-pressed).
disabled	boolean
className	string
ref	Ref<HTMLElement>		A <span>, or a <button> with onClick.

PillProps is an exported type.