OChip

OChip presents compact categorized content with optional icon and removal action, or a monospace overline label for section headers and metadata.

Usage

Step by step

1. Import OChip from the ooko-ui/chip public subpath.
2. Place the primary value in the default slot and optional secondary content, such as a counter, in the dual slot. Add overline for a section or metadata label.
3. When the chip is removable, add close, give the button a contextual closeLabel, and update the parent collection on close.

Example

The rendered example and its source come from the same Vue single-file component.

Design 12

Interactive playground

Change the label, color, size, outline, overline, and close action. The preview updates immediately.

Example label 12

Color primarysecondaryinfosuccesswarningdangerneutral Size smmd Label Outline Overline Closable

Props

Prop	Type	Default	Description
color	"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral"	"primary"	Visual color applied to the chip.
size	OokoFormControlSize	"md"	Controls the chip's scale.
outline	boolean	false	Uses the outlined chip treatment.
overline	boolean	false	Uses the compact monospace, uppercase overline treatment for section headers and metadata labels.
counter	boolean	false	Uses the round, discreet counter treatment for a number shown beside a title.
close	boolean	false	Displays a button that emits the close event.
closeLabel	string	"Remove chip"	Accessible name of the close button.
icon	Component	undefined	Vue component rendered as the chip icon.
iconPosition	OChipIconPosition	"leading"	Places the icon before or after the chip content.

Events

Event	Payload	Description
close	none	Requests removal of the chip.

Slots

Slot	Props	Description
default	none	Provides the visible chip content.
dual	none	Provides content for the secondary segment, such as a counter.
icon	none	Provides configured or custom icon markup and overrides the icon prop.

Related types

Type	Definition
OChipIconPosition	type OChipIconPosition = "leading" | "trailing";
OChipSize	type OChipSize = OokoFormControlSize;
OokoFormControlSize	type OokoFormControlSize = "sm" | "md";
OokoColor	type OokoColor = (typeof OOKO_COLORS)[number];

CSS custom properties

Custom property	Default	Description
--o-chip-padding	var(--o-space-0) var(--o-space-2)	Sets the inner spacing around the chip content.
--o-chip-border-radius	var(--o-radius-round)	Sets the chip corner radius.
--o-chip-gap	var(--o-space-1-5)	Sets the space between chip elements.
--o-chip-icon-size	1rem	Sets the rendered leading or trailing icon size.
--o-chip-close-size	1rem	Sets the close button background area.
--o-chip-close-icon-size	0.75rem	Sets the close icon size to approximately the text size.
--o-chip-focus-width	0.125rem	Sets the close button focus outline width.
--o-chip-focus-style	solid	Sets the close button focus outline style.
--o-chip-focus-offset	0.0625rem	Sets the distance between the close button and its focus outline.
--o-chip-font-size	max(var(--o-font-size-xs), var(--o-font-size-min))	Sets the chip label size, never below the --o-font-size-min legibility floor by default.
--o-chip-overline-font-size	max(0.6875rem, var(--o-font-size-min))	Sets the overline label size; monospace capitals read larger, so it sits at the legibility floor by default.

Override example

:root {
  --o-chip-border-radius: var(--o-radius-control);
}

Accessibility

• The chip itself is non-interactive inline content and does not add an unnecessary ARIA role.
• Icons are decorative and hidden from assistive technologies.
• When close is enabled, the component renders a native button with its accessible name supplied by closeLabel.
• The close button preserves native pointer, keyboard, and focus behavior and has a visible :focus-visible outline.
• Native attributes are forwarded to the root span.

Behavior and edge cases

• Activating the close button emits close; visibility remains controlled by the parent.
• The close button has equal visual spacing from the top, bottom, and inline end in both sizes.
• The icon prop accepts any Vue icon component, while the icon slot overrides it.
• iconPosition has no visual effect when neither the icon prop nor the icon slot is provided.
• The dual slot creates a second segment using the current theme's default surface and text colors.
• overline renders a transparent chip with a thin colored border, compact corners, and uppercase monospace text with widened letter-spacing. Put an index in the default slot with the label (for example S.02 Work) and a counter in the dual slot, which then becomes a segment filled with the chip color and white text, separated from the label by the border. overline takes precedence over outline.
• Uppercase is visual only (text-transform), so assistive technologies read the slot text as written.
• counter renders a round, discreet pill with a tinted background and tabular digits, for a number shown beside a title, such as the number of items in a group. Give the number context in the surrounding text or an aria-label, since a bare number is ambiguous.
• The overline font comes from the --o-font-family-mono semantic token.
• A leading icon remains at the far left. A trailing icon moves to the end of the dual segment when present.
• When both a trailing icon and the close button are present, the close button remains the final control.
• md is 1.5rem (24 px at the default root size) and sm is 1.125rem (18 px). Both can grow with enlarged or wrapping content.
• App defaults may configure color, size, outline, closeLabel, and iconPosition; direct props take precedence.