Badge
A small pill label in any brand colour, with an optional pulsing 'live' dot, inspired by a certain timelapsing app.
<hc-badge>New</hc-badge>
<hc-badge color="orange">Beta</hc-badge>
<hc-badge color="yellow">Featured</hc-badge>
<hc-badge color="green">Open</hc-badge>
<hc-badge color="cyan">Online</hc-badge>
<hc-badge color="blue">Event</hc-badge>
<hc-badge color="purple">Hackathon</hc-badge>
<hc-badge color="muted">Archived</hc-badge>
<hc-badge color="ink">Ink</hc-badge><hc-badge variant="soft">Soft</hc-badge>
<hc-badge variant="soft" color="blue">Soft blue</hc-badge>
<hc-badge variant="outline" color="purple">Outline</hc-badge>
<hc-badge pulse>Live now</hc-badge>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
color | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "muted" | "ink" | "red" | Brand color |
variant | "solid" | "soft" | "outline" | "solid" | Fill style |
pulse | boolean | false | Show a pulsing dot |
CSS parts
| Name | Description |
|---|---|
badge | The pill |