Chip

Compact tag for labeling and filtering, in solid and outline treatments.

A Chip is a compact tag in one of two treatments: solid on the neutral chip surface, or outline with the brand border and accent. Four sizes (s, m, l, xl), an optional prefix icon, and an optional close affordance.

Usage

import { Chip } from '@workflowbuilder/ui';

function Example() {
  return <Chip label="tag label" variant="outline" size="l" onClose={() => remove()} />;
}

Props

Also accepts every standard <span> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

labelrequired

Typestring

closeLabel

Typestring

DefaultRemove ${label}

Accessible name of the close affordance.

onClose

Type() => void

When set, a close affordance is rendered and invokes this callback.

prefixIcon

TypeReactNode

size

TypeChipSize

Default'm'

variant

TypeChipVariant

Default'solid'

CSS variables

Color

--wb-public-chip-focus-ring-color