@ds-kit/lozenge
v3.1.1
Published
Lozenge component
Downloads
8
Readme
title: "Lozenge" slug: "/packages/lozenge" category: "general" componentNames:
- "Lozenge"
Lozenge
The Lozenge component is used to display metadata. The most common use for the lozenge is to indicate how often an app is being updated (e.g. "updated weekly")
import Lozenge from "@ds-kit/lozenge"
Basic Example
<Lozenge>Simple Lozenge</Lozenge>
Colors
You can use the props bg
, color
, and borderColor
to set custom colors for lozenges. Lozenges use a bg
value of 50
, a color
value of 600
, and a borderColor
value of 300
.
<>
<Lozenge mr="1rem" bg="yellow.50" color="yellow.600" borderColor="yellow.300">
Yellow Lozenge
</Lozenge>
<Lozenge mr="1rem" bg="green.50" color="green.600" borderColor="green.300">
Green Lozenge
</Lozenge>
<Lozenge mr="1rem" bg="red.50" color="red.600" borderColor="red.300">
Red Lozenge
</Lozenge>
<Lozenge mr="1rem" bg="purple.50" color="purple.600" borderColor="purple.300">
Purple Lozenge
</Lozenge>
</>
With icons
<Lozenge iconName="share">
{ "Updated today!" }
</Lozenge>