variant prop is set to
gradient, you can control gradient with
gradient prop, it accepts an object with
deg properties. If the
gradient prop is not set,
Badge will use
theme.defaultGradient which can be configured on the theme object.
gradient prop is ignored when
variant is not
variant="gradient" supports only linear gradients with two colors. If you need a more complex gradient, then use Styles API to modify
circle prop, to reduce horizontal padding and make badge width equal to its height:
fullWidth to make badge span full width of its parent element:
You can customize colors for
Badge and other components variants by adding
variantColorResolver to your theme.
autoContrast prop and theme.autoContrast. If
autoContrast is set either on
Badge or on theme, content color will be adjusted to have sufficient contrast with the value specified in
autoContrast feature works only if you use
color prop to change background color.
autoContrast works only with
Component Styles API
Hover over selectors to highlight corresponding elements
Badge is a polymorphic component – its default root element is
div, but it can be changed to any other element or component with
You can also use components in
component prop, for example, Next.js
Polymorphic components with TypeScript
Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,
BadgePropsdoes not extend
divis the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support
componentprop), then your component props interface should extend HTML element props, for example:
If you want your component to remain polymorphic after wrapping, use
createPolymorphicComponentfunction described in this guide.