Badge provides five general variants: light, core, dark, outline, and dark-outline. Each variant has five color variants controlled by the colorVariant prop.
There is also the industryUpsell variant with its own set of color variants.
Note : The following variant and colorVariant combinations list the revised options in our design system.
import { Badge } from '@houzz/ui'; < >
< Grid cols = " repeat(5, minmax(0, 1fr)) " gaps = " M " placeItems = " start " >
< Badge variant = " light " colorVariant = " neutral " icon = { < Icon name = " heart " /> } >
LIGHT NEUTRAL
</ Badge >
< Badge variant = " light " colorVariant = " success " icon = { < Icon name = " heart " /> } >
LIGHT SUCCESS
</ Badge >
< Badge variant = " light " colorVariant = " warning " icon = { < Icon name = " heart " /> } >
LIGHT WARNING
</ Badge >
< Badge variant = " light " colorVariant = " danger " icon = { < Icon name = " heart " /> } >
LIGHT DANGER
</ Badge >
< Badge variant = " core " colorVariant = " accent " icon = { < Icon name = " heart " /> } >
CORE ACCENT
</ Badge >
< Badge variant = " outline " colorVariant = " neutral " icon = { < Icon name = " star " /> } >
OUTLINE NEUTRAL
</ Badge >
< Badge variant = " outline " colorVariant = " accent " icon = { < Icon name = " star " /> } >
OUTLINE ACCENT
</ Badge >
</ Grid >
< HorizontalStack mt = " L " >
< Badge variant = " industryUpsell " colorVariant = " promotionalOffer " >
PROMOTIONAL OFFER
</ Badge >
< Badge variant = " industryUpsell " colorVariant = " featureHighlighting " >
FEATURE HIGHLIGHTING
</ Badge >
< Badge variant = " industryUpsell " colorVariant = " upgrade " >
UPGRADE
</ Badge >
< Badge variant = " industryUpsell " colorVariant = " premium " >
PREMIUM
</ Badge >
</ HorizontalStack >
</ >
Use the size prop to select from available size variants.
Use the colorVariant to change color combinations.
BadgeSystem Props Badge composes Box and has all system props available
COMMONTYPOGRAPHYBORDERLAYOUTPOSITIONFLEXGRIDLearn More Name Type Description gradientResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>- variant"light" | "core" | "dark" | "industryUpsell" | "outline" | "outline-dark"Type of badge core colorVariant"accent" | "neutral" | "danger" | "warning" | "success" | "promotionalOffer" | "featureHighlighting" | "upgrade" | "premium"Color variant accent iconReactNodeIcon to show before label