Components
Badge
A compact label for statuses, counts, and categories.
Props
Native attributes and event handlers are forwarded to the span element.
Status variants include success, warning, error, and info. Badges are noninteractive labels.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the component. |
class | string | '' | Classes merged with theme styles and variants. |
element | HTMLSpanElement | null | null | Bindable reference to the native element. |
inTransition | TransitionProps | undefined | Entrance override; falls back to transition. |
isVisible | boolean | true | Bindable visibility; removing the component runs its exit transition. |
outTransition | TransitionProps | undefined | Exit override; falls back to transition. |
theme | Theme | global theme | Local theme override. |
transition | TransitionProps | [noopTransition, {}] | Transition function and optional parameters. |
variants | string[] | [] | Local variants or references to other theme styles. |
Default usage
Import Badge from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Badge in the built-in themes is shown below.
error — Apply the error variant.
Loading...info — Apply the info variant.
Loading...success — Apply the success variant.
Loading...warning — Apply the warning variant.
Loading...outline — Apply the outline variant.
Loading...pill — Apply the pill variant.
Loading...square — Apply the square variant.
Loading...Class overrides
Apply rounded-full font-semibold shadow-sm locally.
Loading...Props and behavior
Change title while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Loading...