Mobify DevCenter

DocumentationAPI & SDK ReferenceHow-To GuidesMobify University

Badge

A badge is a simple, circular element used to display small amounts of important information, such as the number of items in a cart.

Prop NameTypeIs RequiredDefault ValueDescription
titleunionrequirednoneThe title provides text for user agents like screen readers.
childrennodeoptionalnoneAny children to be nested within this Badge. **WARNING!** This is intentionally hidden from screen readers! Use the `title` to provide meaningful text instead.
classNamestringoptionalnoneAdds values to the `class` attribute of the root element.

Example usage

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark
1 Item in Cart