[{"value":"Preview","id":"preview","hLevel":2,"level":1},{"value":"Code example","id":"code-example","hLevel":2,"level":1},{"value":"BadgeProps","id":"badgeprops","hLevel":2,"level":1,"children":[{"value":"appearance?","id":"appearance","hLevel":3,"level":2},{"value":"icon?","id":"icon","hLevel":3,"level":2},{"value":"iconPosition?","id":"iconposition","hLevel":3,"level":2}]},{"value":"Type descriptions","id":"type-descriptions","hLevel":2,"level":1,"children":[{"value":"IconSource","id":"iconsource","hLevel":3,"level":2}]}]

Badge

The Badge UI component is used to highlight contextual information about an object, such as labels or statuses. The object can be anything that carries a state or label, like an order or subscription.

Preview

Code example

render('Checkout::Dynamic::Render', (root) => {
  return <Badge icon="info">Available</Badge>
});

BadgeProps

tip

Optional properties are marked with a ?. Properties without a ? are required.

appearance?

info warning critical error accent Default: info

The type of the badge.

icon?

IconSource

The type of icon displayed on the badge.

iconPosition?

start end Default: start

The position of the icon on the badge.

start: Before the badge
end: After the badge

Type descriptions

IconSource

search arrowDown arrowUp arrowLeft arrowRight calendar cart dot down up right left close closeFill discount info infoFill lock minus plus success successFill store spin bag question email phone share giftcard more timer hook ship location eyeOpen eyeClose menu parcel copy

Was this article helpful to you?