Gliding Pills

Usage

import { GlidingPills } from '@wdzyi/ui';

const [view, setView] = useState('Preview');

<GlidingPills
  label='View'
  items={['Preview', 'React', 'CSS']}
  value={view}
  onChange={setView}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

itemsstring[]

The options.

valuestring

The one that’s chosen.

onChange(item: string) => void

Called with the option that was pressed.

labelstring

Names the group for screen readers.

size'sm' | 'md' = 'sm'

Its type size and padding.

monoboolean = false

Sets the labels in mono.

onPeek(item: string) => void

Called on hover, to fetch what an option needs before it’s asked for.

Notes

• The plate is measured from the chosen button, and again when the row resizes, so it stays right if the fonts load late.
• On a narrow screen the row scrolls, and keeps the choice in view without moving the page.