Badge
Usage
ShBadge shows a short, highly visible text such as a version number, a document status or a category label. The text is written as the content of the component.
Basic
A badge with its default style.
1.2+
::ShBadge
1.2+
::
Custom style
A badge with the default classes of wrapper extended through ui. Classes passed in ui are merged with the defaults, so a conflicting class (for example another background color) replaces the default one.
1.2+
::ShBadge
---
ui:
wrapper: hover:scale-125 duration-300 mx-10 bg-oma-red-50 dark:bg-oma-red-700 text-primary
---
1.2+
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
description | string | "" | Note for content writers. It is not rendered on the website. |
Slots
default
UI config
Default classes of every styled element. Override any key through the ui prop, as in the custom style example above.
| Key | Default classes | Description |
|---|---|---|
wrapper | bg-neutral-100 border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 text-neutral-700 | Container of the badge: background, border, text color and their dark-mode variants. |
