Badge

Open in Playground

Overlays a small indicator on the corner of its children, like MUI's Badge. badgeContent is a number or text; numbers above max show as "99+" and zero is hidden unless showZero. variant="dot" shows a plain dot, anchorOrigin picks the corner, overlap="circular" fits round children, and invisible hides it. Colors: default, secondary, success, danger, warning, info. A Badge is an indicator that sits on top of another element (a count on an icon); it is not a status label. For a standalone status pill such as "Active" or "Failed", use `Chip` with a tone.

499+0newKM
1

Props

  • badgeContentReactNode

    Number or text shown in the badge.

  • color'default' | 'secondary' | 'flat' | 'success' | 'danger' | 'warning' | 'info'
    Default: 'default'

    Badge color.

  • size'sm' | 'md'
    Default: 'md'

    Size of a content badge.

  • shape'square' | 'rounded' | 'pill'
    Default: 'square'

    Corner style of a content badge.

  • variant'standard' | 'dot'
    Default: 'standard'

    A content badge or a plain dot.

  • maxnumber
    Default: 99

    Numbers above this show as "<max>+".

  • showZeroboolean
    Default: false

    Show the badge when badgeContent is 0.

  • invisibleboolean

    Force the badge hidden (or shown); by default it hides when there is nothing to show.

  • overlap'rectangular' | 'circular'
    Default: 'rectangular'

    Use circular so the badge sits on the edge of a round child.

  • anchorOrigin{ vertical: 'top' | 'bottom', horizontal: 'left' | 'right' }
    Default: { vertical: 'top', horizontal: 'right' }

    Which corner the badge sits on.

  • classNamestring
    Default: ''

    Extra classes for the root element.

  • childrenReactNode

    Content.

  • ...rest

    Any other props are passed to the underlying element.