Counter Badge

View .md

Badge that displays a numerical count.

Default

Loading interactive example. Full source is available below.

View example source
Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { CounterBadge } from "@coreai-ds/react-components";
import * as React from 'react';

export const Default = (): JSXElement => <CounterBadge count={5}/>;

export default Default;
API referenceGenerated CoreAI prop and type summaries

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

CounterBadge API

Define a styled CounterBadge, using the useCounterBadge_unstable hook.

interface CounterBadgeProps {
  /**
   * A Badge can have different appearances that emphasize certain parts of it:
   *  - filled: The default appearance if one is not specified.
   *    The badge background is filled with color with a contrasting foreground text to match.
   *  - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
   * @default filled
   */
  appearance?: "filled" | "ghost";

  as?: "div";

  children?: any;

  className?: string;

  /**
   * Semantic colors for a counter badge
   * @default brand
   */
  color?: "brand" | "danger" | "important" | "informative";

  /**
   * Value displayed by the Badge
   * @default 0
   */
  count?: number;

  /**
   * If a dot should be displayed without the count
   * @default false
   */
  dot?: boolean;

  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * A Badge can position the icon before or after the content.
   */
  iconPosition?: "before" | "after";

  /**
   * Max number to be displayed
   * @default 99
   */
  overflowCount?: number;

  ref?: Ref<HTMLDivElement>;

  /**
   * A Badge can be circular or rounded
   * @default circular
   */
  shape?: "circular" | "rounded";

  /**
   * If the badge should be shown when count is 0
   * @default false
   */
  showZero?: boolean;

  /**
   * A Badge can be on of several preset sizes.
   */
  size?: "small" | "medium" | "large" | "extra-large" | "tiny" | "extra-small";

  style?: CSSProperties;
}

Implementation

CoreAI 0.12.0; Fluent 9.74.9.

Setup and dependencies.

Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.

Note: Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead.

Appearance

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { CounterBadge } from "@coreai-ds/react-components";
import * as React from 'react';

export const Appearance = (): JSXElement => {
    return (<>
      <CounterBadge count={5} appearance="filled"/>
      <CounterBadge count={5} appearance="ghost"/>
    </>);
};

export default Appearance;

Color

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { CounterBadge } from "@coreai-ds/react-components";
import * as React from 'react';

export const Color = (): JSXElement => {
    return (<>
      <CounterBadge appearance="filled" color="brand" count={5}/>
      <CounterBadge appearance="filled" color="danger" count={5}/>
      <CounterBadge appearance="filled" color="important" count={5}/>
      <CounterBadge appearance="filled" color="informative" count={5}/>
    </>);
};

export default Color;

Dot

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { CounterBadge } from "@coreai-ds/react-components";
import * as React from 'react';

export const Dot = (): JSXElement => <CounterBadge count={0} dot/>;

export default Dot;

Shapes

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { CounterBadge } from "@coreai-ds/react-components";
import * as React from 'react';

export const Shapes = (): JSXElement => {
    return (<>
      <CounterBadge count={5} shape="circular"/>
      <CounterBadge count={5} shape="rounded"/>
    </>);
};

export default Shapes;

Sizes

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { CounterBadge } from "@coreai-ds/react-components";
import * as React from 'react';

export const Sizes = (): JSXElement => {
    return (<>
      <CounterBadge count={5} size="tiny"/>
      <CounterBadge count={5} size="extra-small"/>
      <CounterBadge count={5} size="small"/>
      <CounterBadge count={5} size="medium"/>
      <CounterBadge count={5} size="large"/>
      <CounterBadge count={5} size="extra-large"/>
    </>);
};

export default Sizes;