For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/numeric-badge.md.
Design System

    NumericBadge

    A compact count, ! / ? glyph, or icon attached to a tab, button, menu item, or step.

    type sets the visual weight and color sets the meaning. Supported combinations:

    • solid: brand, danger
    • secondary: neutral, neutral-alt, info, success, danger, brand
    • outline: neutral, success, danger, brand

    The default is secondary / neutral. With type="solid", the default color is brand.

    size="default" corresponds to Medium (20px tall, 16px icon); size="small" is 16px tall with a 12px icon. Pass content as children and give an icon-only badge an accessible name when it conveys meaning.

    Hover and focus states apply to clickable badges. Use asChild with a native button or link when the badge is an action or navigation target.

    Migration from the removed flat type API:

    Previous typeNew typeNew color
    primarysecondaryneutral
    primary-altsecondaryneutral-alt
    brandsolidbrand
    destructivesoliddanger
    outlineoutlineneutral
    infosecondaryinfo

    Source · Storybook

    Usage

    import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';

    Examples

    Sizes

    Two heights, chosen to sit inside the control they are attached to rather than beside it.

    Types

    Every supported Type × Color combination, in Medium and Small.

    Content

    Numbers, short glyphs, and icons share the same badge heights.

    Clickable

    Use a native button for an action; Tab, Enter, and Space work as expected.

    Props

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    color{ neutral: string; 'neutral-alt': string; brand: string; danger: string; success: string; info: string; }type === 'solid' ? 'brand' : 'neutral
    type{ solid: string; secondary: string; outline: string; }secondary
    size{ default: string; small: string; }default
    data-testidstring | undefined
    asChildboolean | undefinedfalseApplies the badge to its child element, such as a span or a native button.
    data-slotstring | undefined