ModeChip

Usage

Basic

Tones

muted has no fill; the other tones fill with their hue's -light-9 tint, and info uses the primary hue.

Best Practices

• Don't add aria-pressed to a chip whose label changes with the mode; keep it for a fixed-label chip that toggles one mode. Add aria-haspopup when a click opens a mode menu.
• Use tone for risk: muted for the default or safe mode, danger for a mode that lifts a safeguard; the label and icon must still name the mode.
• Keep labels to two to four words.
• Inside ChatComposer, use the toolbar-left slot; in its tray, use the muted tone.
• Change the mode only on a user action or a real change of context, never on a timer.

API Reference

Props

CSS Variables

Overview

• Renders a native <button type="button">; label is the accessible name and the icon stays out of it. click and other native events and attributes fall through to the root.
• A change to label, icon, or tone starts a morph: the icon swaps with a scale, the label blur-crossfades 50ms later, and the width follows; a change mid-morph restarts the clock.
• Colours transition only during a morph (.is-morphing); hover switches instantly, muted to the primary ink and the other tones to a deeper fill.
• Every tone's text measures at least 4.5:1, resting and hovered, in all four theme blocks.
• Under reduced motion every leg lands at once; without the Web Animations API, the width jumps to its new value.
• A disabled chip is semi-transparent, with a not-allowed cursor and no hover change.

Technologies

• The label reuses TxTextTransformer's fade mode, so text comes only from label and there are no slots.
• Motion reference: @flohoeller's Chatbox component clip.
• Source: packages/tuffex/packages/components/src/mode-chip/.