The Chip component displays information such as tags, categories, attributes, or selections in a compact and optionally interactive format. It supports various styles, sizes, and statuses.

Anatomy

Usage

Basic Example

A standard chip using default settings.

Default Chip

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusChip>
        Default Chip
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-chip>
      Default Chip
    </plus-chip>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-chip>
    Default Chip
  </plus-chip>
</template>

Svelte

<plus-chip>
  Default Chip
</plus-chip>

HTML

<plus-chip>
  Default Chip
</plus-chip>

Kind

The kind prop defines the chip’s visual style: filled (solid background) or outlined (transparent with border).

KindKind

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusChip kind="filled">
        Kind
      </PlusChip>
      <PlusChip kind="outlined">
        Kind
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-chip kind="filled">
      Kind
    </plus-chip>
    <plus-chip kind="outlined">
      Kind
    </plus-chip>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-chip kind="filled">
    Kind
  </plus-chip>
  <plus-chip kind="outlined">
    Kind
  </plus-chip>
</template>

Svelte

<plus-chip kind="filled">
  Kind
</plus-chip>
<plus-chip kind="outlined">
  Kind
</plus-chip>

HTML

<plus-chip kind="filled">
  Kind
</plus-chip>
<plus-chip kind="outlined">
  Kind
</plus-chip>

Status

The status prop sets the chip’s color scheme to convey semantic meaning.

StatusStatusStatusStatusStatus

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusChip status="default">
        Status
      </PlusChip>
      <PlusChip status="info">
        Status
      </PlusChip>
      <PlusChip status="success">
        Status
      </PlusChip>
      <PlusChip status="warning">
        Status
      </PlusChip>
      <PlusChip status="danger">
        Status
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-chip status="default">
      Status
    </plus-chip>
    <plus-chip status="info">
      Status
    </plus-chip>
    <plus-chip status="success">
      Status
    </plus-chip>
    <plus-chip status="warning">
      Status
    </plus-chip>
    <plus-chip status="danger">
      Status
    </plus-chip>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-chip status="default">
    Status
  </plus-chip>
  <plus-chip status="info">
    Status
  </plus-chip>
  <plus-chip status="success">
    Status
  </plus-chip>
  <plus-chip status="warning">
    Status
  </plus-chip>
  <plus-chip status="danger">
    Status
  </plus-chip>
</template>

Svelte

<plus-chip status="default">
  Status
</plus-chip>
<plus-chip status="info">
  Status
</plus-chip>
<plus-chip status="success">
  Status
</plus-chip>
<plus-chip status="warning">
  Status
</plus-chip>
<plus-chip status="danger">
  Status
</plus-chip>

HTML

<plus-chip status="default">
  Status
</plus-chip>
<plus-chip status="info">
  Status
</plus-chip>
<plus-chip status="success">
  Status
</plus-chip>
<plus-chip status="warning">
  Status
</plus-chip>
<plus-chip status="danger">
  Status
</plus-chip>

Size

The size prop controls the chip’s dimensions.

SizeSizeSize

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusChip size="sm">
        Size
      </PlusChip>
      <PlusChip size="md">
        Size
      </PlusChip>
      <PlusChip size="lg">
        Size
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-chip size="sm">
      Size
    </plus-chip>
    <plus-chip size="md">
      Size
    </plus-chip>
    <plus-chip size="lg">
      Size
    </plus-chip>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-chip size="sm">
    Size
  </plus-chip>
  <plus-chip size="md">
    Size
  </plus-chip>
  <plus-chip size="lg">
    Size
  </plus-chip>
</template>

Svelte

<plus-chip size="sm">
  Size
</plus-chip>
<plus-chip size="md">
  Size
</plus-chip>
<plus-chip size="lg">
  Size
</plus-chip>

HTML

<plus-chip size="sm">
  Size
</plus-chip>
<plus-chip size="md">
  Size
</plus-chip>
<plus-chip size="lg">
  Size
</plus-chip>

Shape

The shape prop controls the border radius: full (pill shape) or rounded (slightly rounded corners).

ShapeShape

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusChip shape="full">
        Shape
      </PlusChip>
      <PlusChip shape="rounded">
        Shape
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-chip shape="full">
      Shape
    </plus-chip>
    <plus-chip shape="rounded">
      Shape
    </plus-chip>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-chip shape="full">
    Shape
  </plus-chip>
  <plus-chip shape="rounded">
    Shape
  </plus-chip>
</template>

Svelte

<plus-chip shape="full">
  Shape
</plus-chip>
<plus-chip shape="rounded">
  Shape
</plus-chip>

HTML

<plus-chip shape="full">
  Shape
</plus-chip>
<plus-chip shape="rounded">
  Shape
</plus-chip>

Invert

Set the invert prop to use an inverted color scheme, typically for display on darker backgrounds.

InvertedInvertedInvertedInvertedInverted

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusChip status="default" invert="true">
        Inverted
      </PlusChip>
      <PlusChip status="info" invert="true">
        Inverted
      </PlusChip>
      <PlusChip status="success" invert="true">
        Inverted
      </PlusChip>
      <PlusChip status="warning" invert="true">
        Inverted
      </PlusChip>
      <PlusChip status="danger" invert="true">
        Inverted
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-chip status="default" invert="true">
      Inverted
    </plus-chip>
    <plus-chip status="info" invert="true">
      Inverted
    </plus-chip>
    <plus-chip status="success" invert="true">
      Inverted
    </plus-chip>
    <plus-chip status="warning" invert="true">
      Inverted
    </plus-chip>
    <plus-chip status="danger" invert="true">
      Inverted
    </plus-chip>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-chip status="default" invert="true">
    Inverted
  </plus-chip>
  <plus-chip status="info" invert="true">
    Inverted
  </plus-chip>
  <plus-chip status="success" invert="true">
    Inverted
  </plus-chip>
  <plus-chip status="warning" invert="true">
    Inverted
  </plus-chip>
  <plus-chip status="danger" invert="true">
    Inverted
  </plus-chip>
</template>

Svelte

<plus-chip status="default" invert="true">
  Inverted
</plus-chip>
<plus-chip status="info" invert="true">
  Inverted
</plus-chip>
<plus-chip status="success" invert="true">
  Inverted
</plus-chip>
<plus-chip status="warning" invert="true">
  Inverted
</plus-chip>
<plus-chip status="danger" invert="true">
  Inverted
</plus-chip>

HTML

<plus-chip status="default" invert="true">
  Inverted
</plus-chip>
<plus-chip status="info" invert="true">
  Inverted
</plus-chip>
<plus-chip status="success" invert="true">
  Inverted
</plus-chip>
<plus-chip status="warning" invert="true">
  Inverted
</plus-chip>
<plus-chip status="danger" invert="true">
  Inverted
</plus-chip>

Dismissible

Set the dismiss prop to add a close button. Clicking it fires the dismiss event.

DismissibleOutlined Dismiss

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  const handleDismiss = (event) => {
    console.log('Chip dismissed!');
    event.target.style.display = 'none'; // Example: hide the chip
  };

  return (
    <>
      <PlusChip dismiss onDismiss={handleDismiss}>Dismissible</PlusChip>
      <PlusChip dismiss kind="outlined" onDismiss={handleDismiss}>
        Outlined Dismiss
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-chip-dismiss',
  template: `
    <plus-chip dismiss (dismiss)="handleDismiss($event)">Dismissible</plus-chip>
    <plus-chip dismiss kind="outlined" (dismiss)="handleDismiss($event)">
      Outlined Dismiss
    </plus-chip>
  `
})
export class ChipDismissComponent {
  handleDismiss(event: Event) {
    console.log('Chip dismissed!');
    (event.target as HTMLElement).style.display = 'none'; // Example: hide the chip
  }
}

Vue

<template>
  <plus-chip dismiss @dismiss="handleDismiss">Dismissible</plus-chip>
  <plus-chip dismiss kind="outlined" @dismiss="handleDismiss">
    Outlined Dismiss
  </plus-chip>
</template>

<script setup>
const handleDismiss = (event) => {
  console.log('Chip dismissed!');
  event.target.style.display = 'none'; // Example: hide the chip
};
</script>

Svelte

<script>
  import { onMount } from 'svelte';

  let chipElements = [];

  onMount(() => {
    chipElements.forEach(chip => {
      if (chip) {
        chip.addEventListener('dismiss', () => {
          console.log('Chip dismissed!');
          chip.style.display = 'none';
        });
      }
    });
  });
</script>

<plus-chip bind:this={chipElements[0]} dismiss>Dismissible</plus-chip>
<plus-chip bind:this={chipElements[1]} dismiss kind="outlined">
  Outlined Dismiss
</plus-chip>

HTML

<plus-chip dismiss id="dismissible-chip">Dismissible</plus-chip>
<plus-chip dismiss kind="outlined" id="outlined-dismiss-chip">
  Outlined Dismiss
</plus-chip>

<script>
  document.querySelectorAll('plus-chip[dismiss]').forEach(chip => {
    chip.addEventListener('dismiss', () => {
      console.log('Chip dismissed!');
      chip.style.display = 'none'; // Example: hide the chip
    });
  });
</script>

Show console

Console Output:

No console output yet. Try interacting with the components above.

Clear Console

Disabled State

Set the disabled prop to prevent user interaction, including dismissing.

DisabledDisabled OutlinedDisabled Dismissible

Show code

React

import { PlusChip } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusChip disabled>
        Disabled
      </PlusChip>
      <PlusChip kind="outlined" disabled>
        Disabled Outlined
      </PlusChip>
      <PlusChip dismiss="true" disabled>
        Disabled Dismissible
      </PlusChip>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-chip disabled>
      Disabled
    </plus-chip>
    <plus-chip kind="outlined" disabled>
      Disabled Outlined
    </plus-chip>
    <plus-chip dismiss="true" disabled>
      Disabled Dismissible
    </plus-chip>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-chip disabled>
    Disabled
  </plus-chip>
  <plus-chip kind="outlined" disabled>
    Disabled Outlined
  </plus-chip>
  <plus-chip dismiss="true" disabled>
    Disabled Dismissible
  </plus-chip>
</template>

Svelte

<plus-chip disabled>
  Disabled
</plus-chip>
<plus-chip kind="outlined" disabled>
  Disabled Outlined
</plus-chip>
<plus-chip dismiss="true" disabled>
  Disabled Dismissible
</plus-chip>

HTML

<plus-chip disabled>
  Disabled
</plus-chip>
<plus-chip kind="outlined" disabled>
  Disabled Outlined
</plus-chip>
<plus-chip dismiss="true" disabled>
  Disabled Dismissible
</plus-chip>

Note

The type="avatar" prop is available but its specific usage and styling require integration with the Avatar component or custom styling. Examples are omitted here as they depend on external components or custom CSS.

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

• Keyboard Behavior:
  • Chips are focusable via the Tab key if not disabled.
  • If a chip is dismissible, the dismiss button (plus-icon) is focusable and can be activated with Enter or Space.
• Screen Reader:
  • The component has role="status" and aria-live="polite".
  • aria-label is set based on the status prop (e.g., “success chip”). Consider providing more specific context if needed, potentially via an aria-labelledby attribute pointing to associated text.
  • aria-disabled is set based on the disabled prop.
  • The dismiss button has an aria-label="Remove".
• Required Developer Actions:
  • Ensure the chip’s content (passed via the default slot) is meaningful and understandable.
  • If chips represent interactive elements (like filters), consider using a more appropriate role (e.g., button or checkbox) depending on the interaction model, potentially by wrapping the plus-chip or using a different component.
  • Ensure sufficient color contrast between the chip’s text/icon and its background, especially when using status colors or customizing with CSS properties.

Design System

Plus UI Design System on Figma

Visit

API Reference

Properties

Name	Type	Default	Description	Required
kind	'filled' | 'outlined'	'filled'	Visual style of the chip.	No
size	'sm' | 'md' | 'lg'	'md'	Size of the chip.	No
type	'default' | 'avatar'	'default'	Type of chip, affecting potential internal layout (e.g., for avatar).	No
status	'default' | 'success' | 'warning' | 'danger' | 'info'	'default'	Status/color variant of the chip.	No
shape	'full' | 'rounded'	'full'	Controls the border radius style.	No
invert	boolean	false	Toggles the inverted color scheme.	No
dismiss	boolean	false	Shows a dismiss button.	No
disabled	boolean	false	Disables chip interaction, including the dismiss button.	No

Events

Name	Payload Type	Description
dismiss	CustomEvent<void>	Fired when the dismiss button is clicked.

Slots

Name	Description
default (unnamed)	The main content of the chip.

CSS Shadow Parts

Part	Description
base	The main chip container element (div).
icon	The dismiss icon container (plus-icon).

CSS Custom Properties

Name	Description
--text-color	Controls the text color.
--border-color	Controls the border color.
--bg-default	Controls the default background color.
--bg-hovered	Controls the background on hover.
--bg-pressed	Controls the background when pressed.
--bg-focused	Controls the background when focused.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective