elementsbadge

Badge

Compact label component with icon slots and variant styles.

Import#

import { Badge } from 'moraine'

Slot Structure#

Compact label with optional leading and trailing icon slots.

root
├── leading (Icon, optional)
├── label (optional)
└── trailing (Icon or IconButton, optional)

Examples#

Variants#

Default, outline, and solid styles.

1
function Variants() {
2
  const VARIANTS: BadgeVariantName[] = ['default', 'outline', 'solid']
3

4
  type BadgeVariantName = Exclude<BadgeT.Variant['variant'], undefined>
5

6
  return (
7
    <div class="flex flex-wrap gap-3 items-center">
8
      <For each={VARIANTS}>{(variant) => <Badge variant={variant}>{variant}</Badge>}</For>
9
    </div>
10
  )
11
}

Sizes#

Size scale with leading and trailing icons.

1
function Sizes() {
2
  const SIZES: BadgeSizeName[] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  type BadgeSizeName = Exclude<BadgeT.Variant['size'], undefined>
5

6
  return (
7
    <div class="font-mono flex flex-wrap gap-3 items-center">
8
      <For each={SIZES}>
9
        {(size) => (
10
          <Badge size={size} variant="outline">
11
            {size}
12
          </Badge>
13
        )}
14
      </For>
15
    </div>
16
  )
17
}

Status and Metadata#

Common badge content for pills, counters, and status labels.

1
function StatusAndMetadata() {
2
  return (
3
    <div class="space-y-2">
4
      <div class="flex flex-wrap gap-3 items-center">
5
        <Badge variant="solid" leading="i-lucide-check-check">
6
          Published
7
        </Badge>
8
        <Badge variant="default">测试</Badge>
9
        <Badge variant="outline" trailing="i-lucide-git-branch">
10
          v0.1.0
11
        </Badge>
12
        <Badge variant="outline" leading="i-lucide-users">
13
          24 contributors
14
        </Badge>
15
      </div>
16
    </div>
17
  )
18
}

Dismissible tags#

Clickable trailing icons support removable tag UIs like Select multi-value chips.

1
function DismissibleTags() {
2
  const INITIAL_TAGS = ['Design', 'SolidJS', 'Kobalte', 'UnoCSS']
3

4
  const [tags, setTags] = createSignal(INITIAL_TAGS)
5

6
  return (
7
    <div class="flex flex-col gap-3 items-start">
8
      <div class="flex flex-wrap gap-2 max-w-2xl">
9
        <For each={tags()}>
10
          {(tag) => (
11
            <Badge
12
              variant="default"
13
              trailing="icon-close"
14
              title={tag}
15
              classes={{
16
                root: 'pe-0',
17
                trailing: 'hover:bg-accent rounded scale-80',
18
              }}
19
              onTrailingClick={() => setTags((current) => current.filter((item) => item !== tag))}
20
            >
21
              {tag}
22
            </Badge>
23
          )}
24
        </For>
25
      </div>
26

27
      <Button size="sm" variant="outline" onClick={() => setTags(INITIAL_TAGS)}>
28
        Reset tags
29
      </Button>
30
    </div>
31
  )
32
}

API Reference#

Attributes#

Slotroot2 attributes

Inline badge container that carries the variant, size, and interactive state.

Data Attributes

Data Attribute	Description
data-size	Stores the resolved size variant.
data-variant	Stores the resolved visual variant.

Props#

Prop	Type	Default	Description
children	`JSX.Element`	—	Children of the badge.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`BadgeT.Classes \| undefined`	—	—
leading	`IconT.Name`	—	Leading icon name.
onTrailingClick	`JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> \| undefined`	—	Callback when the trailing icon/button is clicked.
ref	`JSX.HTMLElementTags["span"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`BadgeT.Styles \| undefined`	—	—
title	`string \| undefined`	—	Accessible title shown by the browser for the badge root.
trailing	`IconT.Name`	—	Trailing icon name.
variant	`"default" \| "outline" \| "solid" \| undefined`	—	—