Badge

The badge is a component used to notify the user that something has occurred, in the app context.

Usage

import { HvBadge } from "@hitachivantara/uikit-react-core";

Source

View Source Code

Package

@hitachivantara/uikit-react-core

Icon

Use the icon prop to specify a icon to use with the badge.

99+

100%

<>
  <HvBadge count={0} icon={<Alert />} />
  <HvBadge count={1} icon={<Alert />} />
  <HvBadge showCount count={8} icon={<Alert />} />
  <HvBadge showCount count={88} icon={<Alert />} />
  <HvBadge showCount count={888} icon={<Alert />} />
  <HvBadge label="100%" icon={<Alert />} />
</>

<>
  <HvBadge count={0} icon={<Alert />} />
  <HvBadge count={1} icon={<Alert />} />
  <HvBadge showCount count={8} icon={<Alert />} />
  <HvBadge showCount count={88} icon={<Alert />} />
  <HvBadge showCount count={888} icon={<Alert />} />
  <HvBadge label="100%" icon={<Alert />} />
</>

Maximum value

Use the maxCount prop to specify the maximum value to be displayed. Above that value a ’+’ sign is displayed.

99+

999+

<>
  <HvBadge showCount count={10} maxCount={9} />
  <HvBadge showCount count={100} maxCount={99} />
  <HvBadge showCount count={1000} maxCount={999} />
</>

<>
  <HvBadge showCount count={10} maxCount={9} />
  <HvBadge showCount count={100} maxCount={99} />
  <HvBadge showCount count={1000} maxCount={999} />
</>

Text

To display text with the badge you can use the text prop along with the textVariant prop to specify the typography variant to use.

Events

99+

Events

100%

<>
  <HvBadge count={0} text="Events" textVariant="label" />
  <HvBadge count={1} text="Events" textVariant="label" />
  <HvBadge showCount count={8} text="Events" textVariant="title4" />
  <HvBadge showCount count={88} text="Events" textVariant="title4" />
  <HvBadge showCount count={888} text="Events" textVariant="title3" />
  <HvBadge label="100%" text="Events" textVariant="title2" />
</>

<>
  <HvBadge count={0} text="Events" textVariant="label" />
  <HvBadge count={1} text="Events" textVariant="label" />
  <HvBadge showCount count={8} text="Events" textVariant="title4" />
  <HvBadge showCount count={88} text="Events" textVariant="title4" />
  <HvBadge showCount count={888} text="Events" textVariant="title3" />
  <HvBadge label="100%" text="Events" textVariant="title2" />
</>

Controlled count

A badge sample using react hooks to set the number of events.

Events

import { useState } from "react";


export default function Demo() {
  const [count, setCount] = useState(1);
  const addCount = () => setCount(count * 2);


  return (
    <>
      <HvButton onClick={addCount}>Double Value</HvButton>
      <HvBadge showCount count={count} text="Events" textVariant="title4" />
    </>
  );
}

import { useState } from "react";

export default function Demo() {
  const [count, setCount] = useState(1);
  const addCount = () => setCount(count * 2);

  return (
    <>
      <HvButton onClick={addCount}>Double Value</HvButton>
      <HvBadge showCount count={count} text="Events" textVariant="title4" />
    </>
  );
}

Accessibility

If you want to specify a custom aria-label, use the role prop.

Events

<HvBadge
  showCount
  count={25}
  text="Events"
  textVariant="title4"
  role="status"
  aria-label="25 unread notifications"
/>

<HvBadge
  showCount
  count={25}
  text="Events"
  textVariant="title4"
  role="status"
  aria-label="25 unread notifications"
/>

Avatar Banner