Pill

Example

Pill is a 12px label, grey by default. tone="accent" is red text on a pale red ground, for things the reader should notice, such as a screening with a guest Q&A or an unread notification. tone="warning" is Signal yellow and only warns, for example of a cancelled screening. Put a row of pills in .pill-row, which handles wrapping and spacing.

import { useT } from '@iffday/i18n';
import { Pill } from '@iffday/ui';

/** The pills on a screening page: subtitles, guest Q&A and the status. */
export default function Example() {
  const t = useT();
  return (
    <div className="pill-row">
      <Pill>English</Pill>
      <Pill>한국어</Pill>
      <Pill tone="accent">{t('screening.guestQA')}</Pill>
      <Pill tone="warning">{t('screening.cancelled')}</Pill>
    </div>
  );
}

Usage

• Pills hold a word or two: a language, a section, a status. A sentence does not belong in one.
• The stylesheet also has a new tone, 10px and bold; no page uses it yet.

Props