Tag

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Tag } from '@nizivo/react/unstable/tag';

export function TagExample(): JSX.Element {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      <Tag label="Ceramics" removable />
      <Tag label="Ceramics" selected removable />
      <Tag label="Glassware" selected={false} />
      <Tag label="Ceramics" removable disabled />
    </div>
  );
}

ImportCopy Anchor Link

import { Tag } from '@nizivo/react/unstable/tag';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/tag.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: its buttons call onToggle and onRemove. How to choose.

Filter or tokenCopy Anchor Link

With selected the tag is a filter: a button with aria-pressed that shows a check when on, so the state is not colour alone. Without it, the label is plain text. removable adds a 24 px remove button named "Remove Ceramics" (labels.remove, with {label}); the two are sibling buttons. For read-only status, use Badge; for a set of choices in a form, use ChipGroup.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

TagLabels type

import type { TagLabels } from '@nizivo/react/unstable/tag'

Tag's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
removerequired	string	'Remove {label}'	The remove button's name: {label} is the tag's.

TagProps type

import type { TagProps } from '@nizivo/react/unstable/tag'

The props of Tag, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-tag, .nz-tag-check, .nz-tag-label, .nz-tag-remove, .nz-tag-toggle.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• tag-remove: draws the focus outline itself on keyboard focus.
• tag-toggle: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.