Badge
This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.
A component for displaying badges.
↓
Preview
BadgeBadgeBadge
<Cluster g="15"> <Badge>Badge</Badge> <Badge variant="outline">Badge</Badge> <Badge util="cbox" keycolor="blue" bdrs="99"> Badge </Badge></Cluster>Usage
Provided as Badge (c--badge) from the @lism-css/ui package.
Import
import { Badge } from '@lism-css/ui/react';Props
| Property | Description |
|---|---|
variant(optional) | Outputs the c--badge--{variant} class. An outline style is provided by default. |
Source Code
The source code is available on GitHub.
Examples
↓
Usage examples of
<Badge>BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
<Cluster g="15"> <Badge>Badge</Badge> <Badge bgc="red">Badge</Badge> <Badge bgc="orange">Badge</Badge> <Badge bgc="yellow">Badge</Badge> <Badge bgc="green">Badge</Badge> <Badge bgc="blue" bdrs="99"> Badge </Badge> <Badge bgc="purple" bdrs="99"> Badge </Badge> <Badge bgc="pink" bdrs="99"> Badge </Badge> <Badge bgc="gray" bdrs="99"> Badge </Badge></Cluster>variant: outline
An outline style is available out of the box.
↓
variant='outline'BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
<Cluster g="15"> <Badge variant="outline">Badge</Badge> <Badge variant="outline" c="red"> Badge </Badge> <Badge variant="outline" c="orange"> Badge </Badge> ... <Badge variant="outline" c="blue" fz="xs" bdrs="99"> Badge </Badge> <Badge variant="outline" c="purple" fz="xs" bdrs="99"> Badge </Badge> ...</Cluster>Using with u--cbox
↓
Styling example using the
u--cbox classRedOrangeYellowGreenBluePurplePinkGray
<Cluster g="15"> <Badge util="cbox" keycolor="red"> Red </Badge> <Badge util="cbox" keycolor="orange"> Orange </Badge> <Badge util="cbox" keycolor="yellow"> Yellow </Badge> ...</Cluster>Using with an icon
↓
Example
Badge
Badge
<Cluster g="15" ai="center"> <Badge d="inline-flex" g="5" px-s="10" ai="center"> <Icon icon="star-fill" style={{ translate: '-10% 0' }} /> Badge </Badge> <Badge variant="outline" d="inline-flex" g="5" px-s="10" ai="center" bdrs="10"> <Icon icon="tag" style={{ translate: '-10% 0' }} /> Badge </Badge></Cluster>Without @lism-css/ui
An example of building a Badge using only lism-css, without @lism-css/ui.
↓
Example
BadgeBadgeBadge
<Cluster g="15"> <Lism as="span" fz="xs" lh="xs" py="5" px="10" bgc="text" c="base" bdrs="10"> Badge </Lism> <Lism as="span" fz="xs" lh="xs" py="5" px="10" bd bdc="current" bdrs="10"> Badge </Lism> <Lism as="span" util="cbox" keycolor="blue" bd bdc="keycolor:base:40%" fz="xs" lh="xs" py="5" px="10" bdrs="99"> Badge </Lism></Cluster>