# dds-chip



<!-- Auto Generated Below -->


## Overview

A chip is a small inline token that labels a piece of information, such as an attribute or a filter value.

## Usage

### Chip

#### When to use it

Use a chip for a small, inline piece of information: an attribute, a filter value or a selection. It is a passive container, so it has no role, no focus and no events of its own. For something the user clicks, put the chip inside a `<button>`. For a numeric count, use a badge.

#### Content

The default slot holds the chip's text. The text is the chip's only accessible name, so a chip made of just an icon is silent unless an element inside it carries an `aria-label`.

```html
<dds-chip>Q1 2025</dds-chip>
```

#### Status

`status` sets the colour. Colour alone doesn't carry meaning to everyone, so put the status in the text as well, and add `dot` to reinforce it.

```html
<dds-chip status="positive" dot>Active</dds-chip>
<dds-chip status="error" dot>Failed</dds-chip>
```

#### Leading content

Slot an icon, avatar or flag into `start`. The chip does not render any of these itself, so what you slot is what the user sees.

```html
<dds-chip>
  <dds-icon slot="start" name="calendar" size="2xs"></dds-icon>
  Q1 2025
</dds-chip>
```

#### Key and value

Slot a muted prefix into `key` to name what the text is the value of. Write any separator, such as a colon, into the slotted text yourself.

```html
<dds-chip>
  <span slot="key">Campaign:</span>
  Summer 2025
</dds-chip>
```

#### Trailing action

Slot a button into `end` to let users remove the chip. You own the button, its label and what it does, and listen for its `click` yourself.

```html
<dds-chip>
  Removable
  <button slot="end" type="button" aria-label="Remove Removable">
    <dds-icon name="cross-thick" size="2xs"></dds-icon>
  </button>
</dds-chip>
```

A lock icon in `end` marks a chip that can't be removed.

#### Ghost chips

`variant="ghost"` removes the surface fill, which suits a chip sitting on a coloured background.

```html
<dds-chip variant="ghost" size="s">Draft</dds-chip>
```



## Properties

| Property  | Attribute | Description                                                                   | Type                                                                | Default     |
| --------- | --------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------- |
| `dot`     | `dot`     | Shows a dot before the content, coloured by the status.                       | `boolean`                                                           | `false`     |
| `size`    | `size`    | Which step of the size scale to render at.                                    | `"l" \| "m" \| "s"`                                                 | `"m"`       |
| `status`  | `status`  | The meaning the chip's colour conveys.                                        | `"ai" \| "error" \| "info" \| "neutral" \| "positive" \| "warning"` | `"neutral"` |
| `variant` | `variant` | The visual treatment of the chip. The ghost variant removes the surface fill. | `"default" \| "ghost"`                                              | `"default"` |


## Slots

| Slot        | Description                                                |
| ----------- | ---------------------------------------------------------- |
|             | The default slot                                           |
| `"default"` | The chip's content.                                        |
| `"end"`     | Trailing content, such as an action button or a lock icon. |
| `"key"`     | A muted prefix naming what the content is the value of.    |
| `"start"`   | Leading content, such as an icon, avatar or flag.          |


## Shadow Parts

| Part     | Description                        |
| -------- | ---------------------------------- |
| `"root"` | The outermost element of the chip. |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*