Chip

Compact elements that represent an input, attribute, or action. They can be used for selections, filtering, or as interactive elements.

Chip

Chips are compact elements that represent an input, attribute, or action. They can be used for selections, filtering, or as interactive elements.

Basic Chip Example

Basic Chip

import { Chip } from "@akitectio/aki-ui";

export default function ChipExample() {
  return (
    <Chip label="Basic Chip" />
  );
}

Variants

Chips come in three visual style variants: solid, outlined, and soft.

Solid

Outlined

Soft

import { Chip } from "@akitectio/aki-ui";

export default function ChipVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip label="Solid" variant="solid" />
      <Chip label="Outlined" variant="outlined" />
      <Chip label="Soft" variant="soft" />
    </div>
  );
}

Colors

Chips support various color schemes to represent different states or categories.

Default

Primary

Secondary

Success

Warning

Danger

Info

import { Chip } from "@akitectio/aki-ui";

export default function ChipColors() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip label="Default" color="default" />
      <Chip label="Primary" color="primary" />
      <Chip label="Secondary" color="secondary" />
      <Chip label="Success" color="success" />
      <Chip label="Warning" color="warning" />
      <Chip label="Danger" color="danger" />
      <Chip label="Info" color="info" />
    </div>
  );
}

Sizes

Chips are available in three sizes: small, medium, and large.

Small

Medium

Large

import { Chip } from "@akitectio/aki-ui";

export default function ChipSizes() {
  return (
    <div className="flex items-center gap-2">
      <Chip label="Small" size="sm" />
      <Chip label="Medium" size="md" />
      <Chip label="Large" size="lg" />
    </div>
  );
}

Interactive Chips

Chips can be clickable, deletable, or both to support different interaction patterns.

Clickable

Deletable

Both

import { Chip } from "@akitectio/aki-ui";

export default function InteractiveChips() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip 
        label="Clickable" 
        clickable 
        onClick={() => alert('Chip clicked')}
      />
      <Chip 
        label="Deletable" 
        deletable 
        onDelete={() => alert('Delete clicked')}
      />
      <Chip 
        label="Both" 
        clickable 
        deletable
        onClick={() => alert('Chip clicked')}
        onDelete={() => alert('Delete clicked')}
      />
    </div>
  );
}

Chips with Icons

Chips can include icons at the start or end to provide visual context.

With Start Icon

With End Icon

import { Chip } from "@akitectio/aki-ui";

export default function ChipsWithIcons() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip
        label="With Start Icon"
        startIcon={
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                  d="M5 13l4 4L19 7" />
          </svg>
        }
      />
      <Chip
        label="With End Icon"
        endIcon={
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                  d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        }
      />
    </div>
  );
}

Chips with Avatar

Chips can include an avatar for user representation or other visual contexts.

John Doe

import { Chip } from "@akitectio/aki-ui";

export default function ChipsWithAvatar() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip
        label="John Doe"
        avatar={
          <img
            src="https://i.pravatar.cc/300?img=1"
            alt="John Doe"
            className="rounded-full w-full h-full object-cover"
          />
        }
      />
    </div>
  );
}

Props Reference

Prop	Type	Default	Description
label	string	-	Content of the chip
variant	'solid' \| 'outlined' \| 'soft'	'solid'	Style variant of the chip
size	'sm' \| 'md' \| 'lg'	'md'	Size of the chip
color	'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'	Color of the chip
disabled	boolean	false	Whether the chip is disabled
clickable	boolean	false	Whether the chip is clickable
deletable	boolean	false	Whether the chip has a delete button
rounded	boolean	true	Whether the chip has a circular shape
startIcon	ReactNode	-	Icon displayed at the start of the chip
endIcon	ReactNode	-	Icon displayed at the end of the chip
avatar	ReactNode	-	Avatar element to display at the start of the chip
onClick	() => void	-	Callback fired when the chip is clicked
onDelete	() => void	-	Callback fired when the delete icon is clicked