Lozenge component


3.1.12 years ago3 years agoMinified + gzip package size for @ds-kit/lozenge in KB


title: "Lozenge" slug: "/packages/lozenge" category: "general" componentNames:

  • "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>


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 mr="1rem" bg="green.50" color="green.600" borderColor="green.300">
    Green Lozenge
  <Lozenge mr="1rem" bg="red.50" color="red.600" borderColor="red.300">
    Red Lozenge
  <Lozenge mr="1rem" bg="purple.50" color="purple.600" borderColor="purple.300">
    Purple Lozenge

With icons

<Lozenge iconName="share">
  { "Updated today!" }

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.