Chip

A compact element for displaying labels, tags, categories, or selectable items with support for icons, avatars, and close actions.

Import#

import { Chip } from "asheeui";

Usage#

import { Chip } from "asheeui";

export default function Basic() {
	return <Chip>Chip</Chip>;
}

Examples#

Color#

Variant#

Size#

Radius#

Disabled#

With start icon#

With end icon#

With avatar#

PreviewCode

John Doe

With dot indicator#

Closable#

Custom close icon#

Interactive (clickable)#

Combined example#

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

Chip reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Chip />
2. Component config: components.chip in your ashee.config
3. Theme default: defaultVariant / defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    chip: {
      variant: "solid",
      color: "primary",
      size: "md",
      radius: "full",
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  variant: "bordered",
  color: "primary",
  radius: "full",
  className: "",
}

Accessibility#

• Renders a native <div> with tabIndex={0} for keyboard navigation when clickable
• Uses aria-disabled for disabled state
• Close button includes aria-label="Remove chip"
• Supports keyboard interaction with Enter and Space keys when clickable
• Implements focus-visible rings for keyboard navigation

Notes#

• Clickable Chips: When onClick is provided, the chip becomes interactive with cursor and hover effects.
• Close Button: The close button is only rendered when onClose is provided.
• Avatar vs Start Icon: avatar takes precedence over startIcon when both are provided.
• Dot Indicator: Can be a boolean (true uses current color) or a string (custom color value).
• Variant: The underlined variant from the base variant system is automatically mapped to bordered for chips.