Badge

Badges show notifications, counts, or status information on navigation items and icons.

Simple Badged Button

The most common use-case is to render a Badge in a Button to display a number of notifications the user should view. The badge will default to the top-right of the button.

import { Badge } from "@react-md/core/badge/Badge";
import { Button } from "@react-md/core/button/Button";
import { SrOnly } from "@react-md/core/typography/SrOnly";
import NotificationsOutlinedIcon from "@react-md/material-icons/NotificationsOutlinedIcon";
import { type ReactElement } from "react";

export default function SimpleBadgedButtonExample(): ReactElement {
  return (
    <Button buttonType="icon">
      <Badge>3</Badge>
      <NotificationsOutlinedIcon />
      <SrOnly>Notifications</SrOnly>
    </Button>
  );
}

import { Badge } from "@react-md/core/badge/Badge";
import { Button } from "@react-md/core/button/Button";
import { SrOnly } from "@react-md/core/typography/SrOnly";
import NotificationsOutlinedIcon from "@react-md/material-icons/NotificationsOutlinedIcon";
import { type ReactElement } from "react";

export default function SimpleBadgedButtonExample(): ReactElement {
  return (
    <Button buttonType="icon">
      <Badge>3</Badge>
      <NotificationsOutlinedIcon />
      <SrOnly>Notifications</SrOnly>
    </Button>
  );
}

Badge Themes

The Badge can be themed with the normal theme colors using the theme prop.

1111111©

import { Badge } from "@react-md/core/badge/Badge";
import { type CSSProperties, type ReactElement } from "react";

export default function BadgeThemesExample(): ReactElement {
  return (
    <>
      <Badge style={style} theme="greyscale">
        1
      </Badge>
      <Badge style={style} theme="primary">
        1
      </Badge>
      <Badge style={style} theme="secondary">
        1
      </Badge>
      <Badge style={style} theme="warning">
        1
      </Badge>
      <Badge style={style} theme="success">
        1
      </Badge>
      <Badge style={style} theme="error">
        1
      </Badge>
      <Badge style={style} theme="surface">
        1
      </Badge>
      <Badge style={style} theme="clear">
        ©
      </Badge>
    </>
  );
}

const style: CSSProperties = {
  position: "static",
};

import { Badge } from "@react-md/core/badge/Badge";
import { type CSSProperties, type ReactElement } from "react";

export default function BadgeThemesExample(): ReactElement {
  return (
    <>
      <Badge style={style} theme="greyscale">
        1
      </Badge>
      <Badge style={style} theme="primary">
        1
      </Badge>
      <Badge style={style} theme="secondary">
        1
      </Badge>
      <Badge style={style} theme="warning">
        1
      </Badge>
      <Badge style={style} theme="success">
        1
      </Badge>
      <Badge style={style} theme="error">
        1
      </Badge>
      <Badge style={style} theme="surface">
        1
      </Badge>
      <Badge style={style} theme="clear">
        ©
      </Badge>
    </>
  );
}

const style: CSSProperties = {
  position: "static",
};

Badge Position

The Badge is positioned by using position: absolute within a position: relative container and can be configured in a few ways:

Change the core.$badge-offset variable which will apply to both top and right
Change the core.$badge-offset-top and/or core.$badge-offset-right to only change one value
Use the core.badge-set-var mixin to change the offset variable which will apply to both the top and right
Use the core.badge-set-var mixin to change the offset-top and/or offset-right variables which will only change one value

import { Badge } from "@react-md/core/badge/Badge";
import { Button } from "@react-md/core/button/Button";
import { type ReactElement } from "react";

import styles from "./BadgePositionExample.module.scss";

export default function BadgePositionExample(): ReactElement {
  return (
    <>
      <Button className={styles.offset} themeType="outline">
        <Badge>99+</Badge>
        Offset
      </Button>
      <Button className={styles.offsetTop} themeType="outline">
        <Badge>99+</Badge>
        Offset Top
      </Button>
      <Button className={styles.offsetRight} themeType="outline">
        <Badge>99+</Badge>
        Offset Right
      </Button>
    </>
  );
}

import { Badge } from "@react-md/core/badge/Badge";
import { Button } from "@react-md/core/button/Button";
import { type ReactElement } from "react";

import styles from "./BadgePositionExample.module.scss";

export default function BadgePositionExample(): ReactElement {
  return (
    <>
      <Button className={styles.offset} themeType="outline">
        <Badge>99+</Badge>
        Offset
      </Button>
      <Button className={styles.offsetTop} themeType="outline">
        <Badge>99+</Badge>
        Offset Top
      </Button>
      <Button className={styles.offsetRight} themeType="outline">
        <Badge>99+</Badge>
        Offset Right
      </Button>
    </>
  );
}

@use "everything";

.offset {
  @include everything.badge-set-var(offset, -1em);
}

.offsetTop {
  @include everything.badge-set-var(offset-top, -1em);
}

.offsetRight {
  @include everything.badge-set-var(offset-right, -1em);
}

@use "everything";

.offset {
  @include everything.badge-set-var(offset, -1em);
}

.offsetTop {
  @include everything.badge-set-var(offset-top, -1em);
}

.offsetRight {
  @include everything.badge-set-var(offset-right, -1em);
}