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

Display a count or label inside the chip with the text prop.

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 in any corner.

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.

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

Render 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 visibility dynamically with show.

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 for notification counts or status.

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 internal elements.

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 replace chip 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
textstring | number-
color'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info' | '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
askeyof HTMLElementTagNameMap'div'
refHTMLElement | nullnull
classstring-
uiRecord<Slot, Class>-
Badge Empty