HighlightChip · Perron

A pill that floats over the map on glass and turns one highlight of the map on and off, such as line 5C in focus with everything outside it dimmed; while it is selected, the map shows the highlight.

When to use

Use HighlightChip for the one highlight that floats over the map, such as line 5C in focus with everything outside it dimmed, which the rider turns on and off.

Use instead	When
FilterChip	A filter turns on and off in a row of filters, in a panel or the top bar
SegmentedControl	The choice is one of two to five ways to show one view

On this page

Kongens Nytorv

Metro M1, M2 and M3.

Variants and states

	Rest	Hover	Pressed	Focus	Disabled
Default

Default

Rest
Hover
Pressed
Focus
Disabled

Props

Name	Type	Default	Description
`selected`	`boolean`	—	Whether the highlight is on, when the caller controls it. Announced as pressed.
`defaultSelected`	`boolean`	`false`	Whether the highlight is on at first, when the chip keeps the state itself.
`onChange`	`(event: Event, value: boolean, details: Toggle.ChangeEventDetails) => void`	—	Called when a click, Enter or Space turns the chip on or off, with the next selected state: `true` turns the highlight on, `false` clears it. `event` is `details.event`, and `details.cancel()` keeps the chip as it was.
`disabled`	`boolean`	`false`	Whether the chip ignores the pointer and the keys. A disabled chip leaves the tab order, and a selected one still shows that the highlight is on.
`children`*	`ReactNode`	—	Required. What the chip highlights, in a word or two in sentence case, such as "Line 5C" or "Delayed vehicles": the chip's name. A string, an element such as a LineBadge, or a list of both.
`className`	`string`	—	Reaches the root. `className` is merged after `pn-HighlightChip`.
`style`	`CSSProperties`	—	Reaches the root. `className` is merged after `pn-HighlightChip`.
`ref`	`Ref<HTMLButtonElement>`	—	Reaches the root. `className` is merged after `pn-HighlightChip`.

selectedboolean, default —: Whether the highlight is on, when the caller controls it. Announced as pressed.
defaultSelectedboolean, default false: Whether the highlight is on at first, when the chip keeps the state itself.
onChange(event: Event, value: boolean, details: Toggle.ChangeEventDetails) => void, default —: Called when a click, Enter or Space turns the chip on or off, with the next selected state: true turns the highlight on, false clears it. event is details.event, and details.cancel() keeps the chip as it was.
disabledboolean, default false: Whether the chip ignores the pointer and the keys. A disabled chip leaves the tab order, and a selected one still shows that the highlight is on.
children (required)ReactNode, default —: Required. What the chip highlights, in a word or two in sentence case, such as "Line 5C" or "Delayed vehicles": the chip's name. A string, an element such as a LineBadge, or a list of both.
classNamestring, default —: Reaches the root. className is merged after pn-HighlightChip.
styleCSSProperties, default —: Reaches the root. className is merged after pn-HighlightChip.
refRef<HTMLButtonElement>, default —: Reaches the root. className is merged after pn-HighlightChip.

Use it

import { HighlightChip } from '@mylder/perron'

Ask your agent

get_reference({ library: "base-ui", component: "Toggle" })

Keyboard and ARIA

From the Base UI reference for Toggle and the installed Toggle, which builds on Base UI's button hook. "From" says who does it.

Key	Does	From
`Tab`	Moves focus to the chip, in reading order; a disabled chip is skipped	The browser
`Shift+Tab`	Moves focus back out of the chip	The browser
`Enter`, `Space`	Toggle the chip and call `onChange` with the next state	The browser's click; Base UI for a non-button `render`
`Esc`	Nothing on the chip: the screen clears the highlight on Esc, after a dialog and a detail panel, and sets `selected` to `false`	The screen

Element	Role	Accessible name from	States announced
`root`	`button`, a toggle through `aria-pressed`	Its content: the caller's `children`	`aria-pressed` (pressed or not pressed), disabled when disabled

The chip tells its state with aria-pressed and the selected fill, with no word of its own, and its children stay the same through the state, since aria-pressed already says it and changed words would say it twice. Accessibility wants a toggle's state "in words as well as in looks", and aria-pressed puts it in words for the ear; what the chip highlights is the caller's to say, an owned "On" would read beside "Line 5C" as a second name, and a selected-state label can join later as a new optional prop.

What axe won't catch, from the contract, each with how this component meets it:

Everything the eye is told, the ear is told, for every shape each prop accepts: the caller's children name what the chip highlights, and the selected state the eye gets from the inverse fill the ear gets from aria-pressed; a LineBadge or icon in children brings its own text or is aria-hidden beside words that say it.
Every landmark and named region has an accessible name: none here; the chip is a button, not a region.
Every default label can be overridden: none here; the chip owns no strings.
Every shape the type accepts renders, in every variant: children as a string, an element, or a list of an element and a string, each inside the one root, in every State.
A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; the chip doesn't animate.
Native semantics first: a native <button type="button"> from Base UI's Toggle, with aria-pressed, the one ARIA attribute, set by Base UI.
Focus moves in reading order and returns on close: the chip is one tab stop where the screen puts it in the document; it opens nothing, so nothing returns focus, and toggling it keeps focus on it.
Every target is at least size.target-min square: the chip is at least size.control tall and wide, above size.target-min.
Loops stop when the system asks for less motion: none here; the chip has no motion.

Owned strings

No owned strings: every word comes from the caller, as children.

Do and don't

For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.

Rule	Level	Do	Don't	Checked by
DD-1	must	Name what the chip highlights in a word or two: "Line 5C", "Delayed vehicles".	Write an instruction such as "Click to highlight": `aria-pressed` already says it is a toggle and whether it is on.	review
DD-2	should	Float one chip over the map, placed by the screen with `z-index.highlight`, and clear it on Esc after a dialog and a detail panel.	Put a row of highlight chips in a panel or the top bar: a filter people turn on and off there is a FilterChip, and a choice of views a SegmentedControl.	review
DD-3	must	Control it with `selected` when the map can change the highlight too, such as a click on another line.	Keep a second copy of the state beside an uncontrolled chip: the two drift apart, and the chip says the highlight is on when it is not.	review
DD-4	must	Put a LineBadge or an icon in `children` beside the words when it helps the eye find the line.	Give the chip a badge or an icon alone: its content is its name, and a screen reader needs the words.	review
DD-5	must	Keep the words the same, on and off, and let `aria-pressed` say whether the highlight is on.	Restyle the selected chip through `className` to look like the unselected one: the inverse fill is what tells the eye the highlight is on.	review
DD-6	must	Let the chip wrap in a narrow container: it grows taller and keeps every word.	Cut its words off with `nowrap` and an ellipsis through `className`: a Danish line name at 320 px would lose its end.	review