Feedback

Status toggle

Mark an item interested, read or hidden; press again to clear.

import { StatusToggle } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Job status with Undo

Senior Engineer · Stripe

Show code

status-toggle/job.tsx

'use client';

import { Stack, StatusToggle, Text, toast } from '@jsonresume/ui';
import { Check, EyeOff, Star } from 'lucide-react';
import { useState } from 'react';

const options = [
  { value: 'interested', label: 'Interested', icon: <Star /> },
  { value: 'read', label: 'Read', icon: <Check /> },
  { value: 'hidden', label: 'Hide', icon: <EyeOff /> },
];

export default function StatusToggleJob() {
  const [status, setStatus] = useState<string | null>('read');
  const change = (next: string | null) => {
    const previous = status;
    setStatus(next);
    if (next === 'hidden') {
      toast({
        title: 'Job hidden',
        action: {
          label: 'Undo',
          altText: 'Undo hiding',
          onClick: () => setStatus(previous),
        },
      });
    }
  };
  return (
    <Stack direction="row" gap={4} align="center" wrap>
      <Text weight="semibold">Senior Engineer · Stripe</Text>
      <StatusToggle
        label="Status for Senior Engineer at Stripe"
        value={status}
        onValueChange={change}
        options={options}
      />
      <StatusToggle
        label="Compact status for Senior Engineer at Stripe"
        value={status}
        onValueChange={change}
        options={options}
        iconOnly
      />
    </Stack>
  );
}

Accessibility

A labelled group of toggle buttons with aria-pressed.
Icon-only toggles get their label as aria-label and a title.

Props

Also accepts the attributes of the element StatusToggle renders.
Prop	Type	Default	Description
label required	string	–	Names the group, e.g. "Status for Senior Engineer at Stripe".
onValueChange required	(value: string \| null) => void	–	Pressing the current status again clears it (null).
options required	StatusOption[]	–
value required	string \| null	–	The current status, or null for none.
iconOnly	boolean	false	Show only icons; labels move to aria-label.