# Chip

> `Chip` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

Source: https://ui.jcsoftdev.com/docs/components/chip

`Chip` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

## Import

```ts
import { Chip } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/chip`.

## Usage

```tsx
<Chip tone="neutral">
  Corte clásico
</Chip>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"danger" \| "neutral" \| "warning" \| "success" \| "accent" \| "solid" \| "outline"` | `"neutral"` |  |
| `square` | `boolean` |  | Use the smaller chip radius instead of a full pill. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-chip--default)
- [Square](/storybook/?path=/story/atoms-chip--square)
- [With Icon](/storybook/?path=/story/atoms-chip--with-icon)
- [All Tones](/storybook/?path=/story/atoms-chip--all-tones)
- [All Tones Square](/storybook/?path=/story/atoms-chip--all-tones-square)

## Source

`packages/ui/src/atoms/chip/chip.tsx`