Badge

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

showCount

count

maxCount

<HvBadge 
  showCount
  count={2}
  maxCount={99}
  icon={<HvIconAlert />}
/>

<HvBadge 
  showCount
  count={2}
  maxCount={99}
  icon={<HvIconAlert />}
/>

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 a badge on any content, wrap the children content with the badge component.

Events

99+

Events

100%

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

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

Controlled count

A badge sample using react hooks to set the number of 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} icon={<Alert />} />
    </>
  );
}

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} icon={<Alert />} />
    </>
  );
}

Accessibility

If you want to specify a custom aria-label, ensure the badge has a role.

<HvBadge
  showCount
  count={25}
  icon={<Alert />}
  role="status"
  aria-label="25 unread notifications"
/>

<HvBadge
  showCount
  count={25}
  icon={<Alert />}
  role="status"
  aria-label="25 unread notifications"
/>

Avatar Group Banner