Display

Chip

Compact element for tags, filters and status labels, with icons, color variants, selection and deletion.

<script>
  import { Chip, StatusChip } from "@codeatlasdev/ui";
</script>

<Chip label="Design" variant="brand" deletable ondelete={remove} />
<StatusChip status="success" label="Active" />

A chip becomes a keyboard-focusable toggle button when onclick is set: Enter and Space activate it and aria-pressed follows selected. StatusChip is a separate, non-interactive component for dot + label statuses.

Basic

Design System Svelte 5 Bits UI

Code

<script lang="ts">
  import { Chip } from '@codeatlasdev/ui';
</script>

<Chip label="Design System" />
<Chip label="Svelte 5" />
<Chip label="Bits UI" />

Variants and size

Semantic variants and the compact `sm` size.

Default Brand Success Warning Error Info Small

Code

<script lang="ts">
  import { Chip } from '@codeatlasdev/ui';
</script>

<Chip label="Default" />
<Chip label="Brand" variant="brand" />
<Chip label="Success" variant="success" />
<Chip label="Warning" variant="warning" />
<Chip label="Error" variant="error" />
<Chip label="Info" variant="info" />
<Chip label="Small" size="sm" />

With icons

Pass any Lucide icon component to `icon`.

Featured Boosted Tagged

Code

<script lang="ts">
  import { Chip } from '@codeatlasdev/ui';
  import { Tag, Star, Zap } from '@lucide/svelte';
</script>

<Chip label="Featured" icon={Star} />
<Chip label="Boosted" icon={Zap} />
<Chip label="Tagged" icon={Tag} />

Selectable

Set `onclick` to make the chip a toggle.

Filter A Filter B

Code

<script lang="ts">
  import { Chip } from '@codeatlasdev/ui';

  let a = $state(false);
  let b = $state(true);
</script>

<Chip label="Filter A" selected={a} onclick={() => (a = !a)} />
<Chip label="Filter B" selected={b} onclick={() => (b = !b)} />

Deletable

Click the × button to remove a tag.

Design Svelte Glass

Code

<script lang="ts">
  import { Chip } from '@codeatlasdev/ui';

  const initial = ['Design', 'Svelte', 'Glass'];
  let tags = $state([...initial]);
</script>

{#each tags as tag (tag)}
  <Chip label={tag} deletable ondelete={() => (tags = tags.filter((t) => t !== tag))} />
{/each}
{#if tags.length === 0}
  <button class="reset" type="button" onclick={() => (tags = [...initial])}>Reset tags</button>
{/if}

<style>
  .reset {
    font: inherit;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-brand-text);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
  }
</style>

StatusChip

Semantic status indicators with dot and label.

Active Pending Failed Scheduled Draft

Code

<script lang="ts">
  import { StatusChip } from '@codeatlasdev/ui';
</script>

<StatusChip status="success" label="Active" />
<StatusChip status="warning" label="Pending" />
<StatusChip status="error" label="Failed" />
<StatusChip status="info" label="Scheduled" />
<StatusChip status="neutral" label="Draft" />

Chip props

Prop	Type	Default	Description
`label`	`string`	–	Text content of the chip. Required.
`icon`	`Component`	`undefined`	Icon component rendered before the label.
`variant`	`'default' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'brand'`	`'default'`	Color variant.
`size`	`'sm' \| 'md'`	`'md'`	Chip size.
`selected`	`boolean`	`false`	Selected visual state, exposed as `aria-pressed` on interactive chips.
`deletable`	`boolean`	`false`	Shows a × remove button.
`onclick`	`() => void`	`undefined`	Makes the chip interactive (button role, focusable).
`ondelete`	`() => void`	`undefined`	Called when the × button is clicked.
`class`	`string`	`''`	Extra class names.

StatusChip props

Prop	Type	Default	Description
`status`	`'success' \| 'warning' \| 'error' \| 'info' \| 'neutral'`	–	Semantic status. Required.
`label`	`string`	–	Text shown next to the dot. Required.
`class`	`string`	`''`	Extra class names.