Badge – Code

Implementation
Badge Props

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>

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.

<Badge offset={{ x: "0.5rem", y: "0.5rem" }} aria-label="12 unread">
  12
</Badge>

`Badge` Props

In addition to the props listed below, the Badge component can accept any valid HTML sup props.

{ x?: string; y?: string }

Fine-tune the badge position with CSS sizing values.

Anvil2 Web

Resources

Badge – Code

Common Examples

Use relative positioning on badge parent

Adjusting badge position

Badges without children

React Accessibility

Using aria-label

`Badge` Props

​Common Examples

​Use relative positioning on badge parent

​Adjusting badge position

​Badges without children

​React Accessibility

​Using aria-label

​Badge Props

Common Examples

Use relative positioning on badge parent

Adjusting badge position

Badges without children

React Accessibility

Using aria-label

`Badge` Props