Badge

Variant

Size

Pill

Uppercase

Elevation

href or onclick ?

Background

Accent Tone Delete Warning Validated Info Location

on_trailing_click

Design Svelte A11y

href

Link Learn more

Svelte

<!-- flat (default) — all palettes -->
<Badge>accent</Badge>
<Badge palette="tone">tone</Badge>
<Badge palette="error">error</Badge>
<Badge palette="warning">warning</Badge>
<Badge palette="success">success</Badge>
<Badge palette="info">info</Badge>

<!-- outlined -->
<Badge variant="outlined">accent</Badge>
<Badge variant="outlined" palette="tone">tone</Badge>
<Badge variant="outlined" palette="error">error</Badge> 

API

package_2

import type { BadgeItem } from '@abhc/spektral-ui';

Prop	Type	Default
variant	`"flat" \| "outlined"`	`"flat"`
palette	`"accent" \| "tone" \| "neutral" \| "error" \| "warning" \| "success" \| "info"`	`"accent"`
size	`"sm" \| "md" \| "lg"`	`"md"`
uppercase	`boolean`	`false`
elevation	`"none" \| "subtle" \| "hard"`	`"none"`
pill	`boolean`	`true`
href	`string`	`undefined`
onclick	`() => void`	`undefined`
selected	`boolean`	`false`
trailing	`Snippet`	`undefined`
on_trailing_click	`() => void`	`undefined`
trailing_label	`string`	`undefined`
children	`Snippet`	`—`

Prop variant

Type "flat" | "outlined"

Default "flat"

Prop palette

Default "accent"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop uppercase

Type boolean

Default false

Prop elevation

Type "none" | "subtle" | "hard"

Default "none"

Prop pill

Type boolean

Default true

Prop href

Type string

Default undefined

Prop onclick

Type () => void

Default undefined

Prop selected

Type boolean

Default false

Prop trailing

Type Snippet

Default undefined

Prop on_trailing_click

Type () => void

Default undefined

Prop trailing_label

Type string

Default undefined

Prop children

Type Snippet

Default —

BadgeGroup

Prop	Type	Default
badges	`BadgeItem[]`	`—`
selected	`string[]`	`[]`
multiple	`boolean`	`true`
variant	`"flat" \| "outlined"`	`"flat"`
palette	`"accent" \| "tone" \| "error" \| "warning" \| "success" \| "info" \| "neutral"`	`"accent"`
size	`"sm" \| "md" \| "lg"`	`"md"`
elevation	`"none" \| "subtle" \| "hard"`	`"none"`
pill	`boolean`	`true`
gap	`string`	`"0.5rem"`

Prop badges

Type BadgeItem[]

Default —

Prop selected

Type string[]

Default []

Prop multiple

Type boolean

Default true

Prop variant

Type "flat" | "outlined"

Default "flat"

Prop palette

Default "accent"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop elevation

Type "none" | "subtle" | "hard"

Default "none"

Prop pill

Type boolean

Default true

Prop gap

Type string

Default "0.5rem"