Skip to main content

​
Common Examples

import { Badge, Button } from "@servicetitan/anvil2";

const ExampleComponent = () => {
  return (
    <Button style={{ position: "relative" }}>
      Alerts
      <Badge aria-label="with 12 unread">12</Badge>
    </Button>
  );
};

​
Use relative positioning on badge parent

In order for a badge to properly position itself, the parent of the Badge component that the badge should be placed on needs to have position: relative.
<div style={{ position: "relative " }}>
  Content
  <Badge aria-label="with 10 notifications">10</Badge>
</div>

​
Adjusting badge position

When used with square or rectangular elements, the badge should position itself nicely on the corner of the element. Sometimes, some fine-tuning may be required if the element has a different shape, such as text. Use the offset prop to supply CSS sizing values to the x and y parameters.

​
Badges without children

If no children element is provided for the Badge component, only a red dot will appear.

​
React Accessibility

​
Using aria-label

<Badge aria-label="12 unread">12</Badge>
Do
Use the aria-label prop to provide better context for the number displayed within the badge.
<Badge>12</Badge>
Don’t
Provide only the children for screen readers to use.For more guidance on accessible labels and ARIA, see labels and CTA best practices.
Last modified on January 23, 2026