Badge

2026.1

Requires Celeste 2026.1

99 99 99 99 99

Install or Update

wp celeste pull component Badge

Dependencies will automatically be installed.

Properties

Prop	Description
`icon`	Icon, placed before the text
`icon:trailing`	Icon, placed after the text
`is`	HTML element for outer wrapper, defaults to `span`
`variant`	Colour variant, `primary`, `secondary`, `tertiary`, `base` or `contrast`

How to use it

<div class="flow">
    <div class="flex items-center gap-xs">
        <Badge>99</Badge>
        <Badge variant="secondary">99</Badge>
        <Badge variant="tertiary">99</Badge>
        <Badge variant="base">99</Badge>
        <Badge variant="contrast">99</Badge>
    </div>

    <div class="flex items-center gap-xs">
        <Badge icon="info">99</Badge>
        <Badge icon="info" variant="secondary">99</Badge>
        <Badge icon="info" variant="tertiary">99</Badge>
        <Badge icon="info" variant="base">99</Badge>
        <Badge icon="info" variant="contrast">99</Badge>
    </div>

    <Button size="sm" variant="contrast">
        <Badge variant="secondary">New</Badge> Download
    </Button>
</div>