Badge

Does this page need improvement? Let us know.

Sometimes we miss things. We rely on user feedback to tell us how we're doing.

The badge is a static rounded rectangle with an Icon inside it which is useful as a decorative element when you need to draw extra attention to an icon.

Example Instance

<Badge
  icon="info"
  color="primary"
  scale="lg"
  iconStrokeWidth={1}
/>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add badge` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
color	No	LkColorWithOnToken	Sets the color of the badge and its icon	“surface”
icon	No (it assigns one by default)	IconName	Determines which icon gets rendered	“roller-coaster”
iconStrokeWidth	No	number	Controls the stroke width of the icon. Measures in pixels, but you don’t pass the unit, just the number.	1.5
scale	No	LkUnit	Controls the size of the component	“md”
scrim	No	boolean	If true, renders a scrim with background color equal to the result of calling getOnToken(color).	false

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Supported
Native HTML attributes	Supported

Ask the LiftKit Devs