salla-badge
A small rounded label for short content such as a status, a count or a points value.
A small rounded label for short content such as a status, a count or a points value. Use it to highlight a short piece of text or an icon next to other content.
Use it
In HTML or JSX, use the tag <salla-badge> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaBadge } from '@salla.sa/twilight-components-react/badge';Try it
web-components/salla-badge
Example
import { SallaBadge } from '@salla.sa/twilight-components-react/badge';
export function Example() {
return (
<SallaBadge size="xs" bg="primary-100" color="primary-900">New</SallaBadge>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
bg | bg | The background color of the badge | "light" | "primary-100" | "transparent" | 'light' |
color | color | The text color of the badge | "black" | "primary-900" | 'black' |
size | size | The size of the badge | "md" | "sm" | "xs" | 'sm' |
Slots
| Slot | Description |
|---|---|
| (default) | The badge content (text, icons or markup). |
Related
Used inside: <salla-loyalty-point>, <salla-loyalty-reward>, <salla-reward-card>, <salla-reward-details>.