Button

Looks

Button wraps Base UI’s button; className decides how it looks. .button is the default: white with an outline. primary is the one main action on a page, black with white text, reversed in dark mode. soft is grey and suits toolbars. neutral stays transparent until hovered, for Cancel and other secondary actions.

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

export default function Example() {
  const t = useT();
  return (
    <>
      <Button type="button" className="button primary">
        {t('common.save')}
      </Button>
      <Button type="button" className="button">
        {t('common.edit')}
      </Button>
      <Button type="button" className="button soft">
        {t('common.filter')}
      </Button>
      <Button type="button" className="button neutral">
        {t('common.cancel')}
      </Button>
    </>
  );
}

Sizes and shape

The default is 38px tall and small is 31px. The site uses small more often than the default: buttons in list rows, cards and sidebars are small. pill rounds the ends fully and also takes the grey of the Pill label; the follow, edit profile and invitation buttons on profile pages use it.

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

export default function Example() {
  const t = useT();
  return (
    <>
      <Button type="button" className="button primary">
        {t('nav.signIn')}
      </Button>
      <Button type="button" className="button primary small">
        {t('nav.signIn')}
      </Button>
      <Button type="button" className="button small pill">
        {t('common.add')}
      </Button>
      <Button type="button" className="button primary small pill">
        {t('common.add')}
      </Button>
    </>
  );
}

Icon only

.icon-button is a 34px circle in the secondary text grey; with active it turns brand red, as the Watchlist heart does. An icon-only button always needs an aria-label. A text button can carry an icon too: put it before the text, and the button leaves 7px between them.

import { useT } from '@iffday/i18n';
import { Button } from '@iffday/ui';
import { Ellipsis, Heart, Plus } from 'lucide-react';
import { useState } from 'react';

export default function Example() {
  const t = useT();
  const [wanted, setWanted] = useState(true);
  return (
    <>
      <Button type="button" className="icon-button" aria-label={t('common.add')}>
        <Plus size={18} />
      </Button>
      <Button type="button" className="icon-button" aria-label={t('common.actions')}>
        <Ellipsis size={18} />
      </Button>
      <Button
        type="button"
        className={`icon-button ${wanted ? 'active' : ''}`}
        aria-pressed={wanted}
        aria-label={t('film.card.watchlist')}
        onClick={() => setWanted(!wanted)}
      >
        <Heart size={18} fill={wanted ? 'currentColor' : 'none'} />
      </Button>
      <Button type="button" className="button small">
        <Plus size={15} />
        {t('common.add')}
      </Button>
    </>
  );
}

States

selected has the colors of primary and marks a pressed filter; set aria-pressed with it. A button that is saving gets disabled and aria-busy: disabled buttons drop to 45% opacity, and a busy one shows the progress cursor.

Usage

Button defaults to type="submit". Outside a form, or for any button that does not submit, write type="button".
Web code never writes a native <button>: tests/ui-boundary.test.ts fails on one.
Navigation is a link, never a button. To make a link look like a button, give the Link className="button".
The stylesheet also has accent (brand red) and full (full width); no page uses them yet.

Props

packages/ui/src/controls.tsx:21

Prop	Type	Default
`type`		`'submit'`

Other props go to ComponentProps<typeof BaseButton> (see the Base UI documentation).