Data Display

Chip

A notification badge or status dot that overlays on other elements. Typically used with Avatar, Button, or Icon to indicate unread counts, online status, or alerts.

Playground

Experiment with different props in real-time.

JD
3

Basic Usage

Wrap any element with Chip to add a notification dot.

JD
<script lang="ts">
  import { Chip, Avatar } from 'sv5ui';
</script>

<Chip>
  <Avatar src="https://i.pravatar.cc/300?u=1" alt="John Doe" />
</Chip>

With Text

Pass a text prop to display a count or label inside the chip.

JD
3
B
99+
5
<Chip text="3">
  <Avatar src="https://i.pravatar.cc/300?u=2" alt="Jane Doe" />
</Chip>

<Chip text="99+">
  <Avatar src="https://i.pravatar.cc/300?u=3" alt="Bob" />
</Chip>

<Chip text={5}>
  <Icon name="lucide:bell" size={28} />
</Chip>

Positions

Place the chip indicator in any corner using the position prop.

U
1
U
2
U
3
U
4
<Chip position="top-right" text="1">
  <Avatar src="https://i.pravatar.cc/300?u=4" alt="User" />
</Chip>

<Chip position="top-left" text="2">
  <Avatar src="https://i.pravatar.cc/300?u=5" alt="User" />
</Chip>

<Chip position="bottom-right" text="3">
  <Avatar src="https://i.pravatar.cc/300?u=6" alt="User" />
</Chip>

<Chip position="bottom-left" text="4">
  <Avatar src="https://i.pravatar.cc/300?u=7" alt="User" />
</Chip>

Sizes

4 sizes from extra small to large.

U
U
U
3
U
7
<Chip size="xs">
  <Avatar src="https://i.pravatar.cc/300?u=8" alt="User" />
</Chip>

<Chip size="sm">
  <Avatar src="https://i.pravatar.cc/300?u=9" alt="User" />
</Chip>

<Chip size="md" text="3">
  <Avatar src="https://i.pravatar.cc/300?u=10" alt="User" />
</Chip>

<Chip size="lg" text="7">
  <Avatar src="https://i.pravatar.cc/300?u=11" alt="User" />
</Chip>

Colors

Semantic color schemes to convey different meanings.

U
U
U
U
U
U
<Chip color="primary">
  <Avatar src="https://i.pravatar.cc/300?u=12" alt="User" />
</Chip>

<Chip color="secondary">
  <Avatar src="https://i.pravatar.cc/300?u=13" alt="User" />
</Chip>

<Chip color="success">
  <Avatar src="https://i.pravatar.cc/300?u=14" alt="User" />
</Chip>

<Chip color="warning">
  <Avatar src="https://i.pravatar.cc/300?u=15" alt="User" />
</Chip>

<Chip color="error">
  <Avatar src="https://i.pravatar.cc/300?u=16" alt="User" />
</Chip>

<Chip color="info">
  <Avatar src="https://i.pravatar.cc/300?u=17" alt="User" />
</Chip>

Standalone

Use standalone to render the chip without wrapping a child element.

5
New
<Chip standalone />
<Chip standalone color="success" />
<Chip standalone color="error" text="5" />
<Chip standalone color="warning" text="New" />

Show / Hide

Control chip visibility dynamically with the show prop.

U
3
<script lang="ts">
  import { Chip, Avatar, Button } from 'sv5ui';

  let visible = $state(true);
</script>

<Button
  label={visible ? 'Hide' : 'Show'}
  onclick={() => (visible = !visible)}
  size="sm"
/>

<Chip show={visible} text="3">
  <Avatar src="https://i.pravatar.cc/300?u=20" alt="User" />
</Chip>

With Button

Chip works well wrapping buttons to show notification counts or status indicators.

3
<Chip text="3" color="error">
  <Button label="Inbox" leadingIcon="lucide:mail" variant="outline" />
</Chip>

<Chip color="success">
  <Button icon="lucide:bell" variant="soft" />
</Chip>

UI Slots

Use the ui prop to override classes on specific internal elements of the Chip.

SlotDescription
rootOuter wrapper element — controls positioning and layout
baseThe chip badge itself — controls shape, color, size, and position
U
Pro
<Chip
  text="Pro"
  ui={{
    root: 'drop-shadow-md',
    base: 'rounded-md px-2 bg-gradient-to-r from-primary to-tertiary'
  }}
>
  <Avatar src="https://i.pravatar.cc/300?u=22" alt="User" />
</Chip>

Snippets

Use snippets to fully replace the chip badge content with custom markup.

SnippetReplacesDescription
children-Content to wrap with the chip indicator
contenttextCustom content inside the chip badge — use for icons, rich text, etc.

Props

PropTypeDefault
askeyof HTMLElementTagNameMap'div'
textstring | number-
color'primary' | ... | 'surface''primary'
size'3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl''md'
position'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'
insetbooleanfalse
standalonebooleanfalse
showbooleantrue
classstring-
ui{ root, base }-
Badge Empty