NOTE: Introduced feature in
v0.2.0
.
WARNING: This feature received a breaking change in
v0.6.0
.
Badge
is typically used to subtlely display to the user some type of ancillary information, relating to its siblings / parent UI elements.
<script>
import {Badge} from "@kahi-ui/framework";
</script>
<Badge>This is a Badge!</Badge>
Imports
<script>
import {Badge} from "@kahi-ui/framework";
</script>
Palette
You can change the color palette of the Badge
via the palette
property.
<script>
import {Badge, Stack} from "@kahi-ui/framework";
</script>
<Stack.Container
spacing="medium"
orientation="horizontal"
variation="wrap"
>
<Badge>This is a DEFAULT Badge</Badge>
<Badge palette="accent">
This is a ACCENT Badge
</Badge>
<Badge palette="neutral">
This is a NEUTRAL Badge
</Badge>
<Badge palette="dark">This is a DARK Badge</Badge>
<Badge palette="light">
This is a LIGHT Badge
</Badge>
<Badge palette="alert">
This is a ALERT Badge
</Badge>
<Badge palette="affirmative">
This is a AFFIRMATIVE Badge
</Badge>
<Badge palette="informative">
This is a INFORMATIVE Badge
</Badge>
<Badge palette="negative">
This is a NEGATIVE Badge
</Badge>
</Stack.Container>
Radius
NOTE: Introduced feature in
v0.6.0
.
NOTE: By passing an array, you can set responsive values. e.g.
radius={["tiny", "tablet:medium", "mobile:medium"]}
You can modify the border radius of the Badge
via the radius
property.
<script>
import {Badge, Stack} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<Badge palette="inverse">DEFAULT Badge</Badge>
<Badge palette="inverse" radius="nano">
NANO Badge
</Badge>
<Badge palette="inverse" radius="tiny">
TINY Badge
</Badge>
<Badge palette="inverse" radius="small">
SMALL Badge
</Badge>
<Badge palette="inverse" radius="medium">
MEDIUM Badge
</Badge>
<Badge palette="inverse" radius="large">
LARGE Badge
</Badge>
<Badge palette="inverse" radius="huge">
HUGE Badge
</Badge>
<Badge palette="inverse" radius="massive">
MASSIVE Badge
</Badge>
</Stack.Container>
Shape
NOTE: Introduced feature in
v0.6.0
.
NOTE: By passing an array, you can set responsive values. e.g.
shape={["circle", "tablet:pill", "mobile:pill"]}
You can modify the shape of the Badge
via the shape
property.
<script>
import {Badge, Stack} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<Badge palette="inverse">DEFAULT Badge</Badge>
<Badge palette="inverse" shape="circle">
CIRCLE Badge
</Badge>
<Badge palette="inverse" shape="pill">
PILL Badge
</Badge>
</Stack.Container>