material-tailwind/documentation/react/badge.mdx at main · creativetimofficial/material-tailwind

title

Tailwind CSS Badge for React - Material Tailwind

description

Customise your web projects with our easy-to-use badge component for Tailwind CSS and React using Material Design guidelines.

navigation

badge

badge-colors

badge-placement

badge-overlap

badge-with-border

badge-dot

badge-custom-styles

badge-props

types-color

types-overlap

types-placement

badge-theme

badge-theme-object-type

badge-theme-customization

more-examples

github

badge

avatar

breadcrumbs

# Tailwind CSS Badge - React

Use our Tailwind CSS Badge component to show status in your web projects. The Badge can be used as a visual identifier for notifications on your website.

See below our beautiful Badge example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.

import { Badge, Button } from "@material-tailwind/react";

export function BadgeDefault() {
  return (
    <Badge content="5">
      <Button>Notifications</Button>
    </Badge>
  );
}

## Badge Colors

The Badge component comes with 20 different colors that you can change it using the color prop.

import { Badge, Button } from "@material-tailwind/react";

export function BadgeColors() {
  return (
    <div className="flex items-center gap-4">
      <Badge color="red">
        <Button>Red</Button>
      </Badge>
      <Badge color="green">
        <Button>Green</Button>
      </Badge>
      <Badge color="amber">
        <Button>Amber</Button>
      </Badge>
      <Badge color="purple">
        <Button>Purple</Button>
      </Badge>
    </div>
  );
}

## Badge Placement

You can change the position of the Badge component using the placement prop.

import { Badge, Button } from "@material-tailwind/react";

export function BadgePlacement() {
  return (
    <div className="flex items-center gap-4">
      <Badge placement="top-start">
        <Button>Top Start</Button>
      </Badge>
      <Badge placement="top-end">
        <Button>Top End</Button>
      </Badge>
      <Badge placement="bottom-start">
        <Button>Bottom Start</Button>
      </Badge>
      <Badge placement="bottom-end">
        <Button>Bottom End</Button>
      </Badge>
    </div>
  );
}

## Badge Overlap

You can change the overlap of the Badge component using the overlap prop. This can help to place the Badge component on it's right place when using it with circular elements.

import { Badge, IconButton, Avatar } from "@material-tailwind/react";
import { HomeIcon } from "@heroicons/react/24/solid";

export function BadgeOverlap() {
  return (
    <div className="flex items-center gap-8">
      <Badge content="5">
        <IconButton>
          <HomeIcon className="h-4 w-4" />
        </IconButton>
      </Badge>
      <Badge>
        <IconButton>
          <HomeIcon className="h-4 w-4" />
        </IconButton>
      </Badge>
      <Badge content="5" overlap="circular" placement="bottom-end">
        <Avatar
          src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
          alt="profile picture"
        />
      </Badge>
      <Badge overlap="circular" placement="bottom-end">
        <Avatar
          src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
          alt="profile picture"
        />
      </Badge>
    </div>
  );
}

## Badge with Border

You can add a border to the Badge component using the withBorder prop.

import { Badge, Button } from "@material-tailwind/react";

export function BadgeWithBorder() {
  return (
    <Badge content="5" withBorder>
      <Button>Notifications</Button>
    </Badge>
  );
}

## Badge Dot

You can use the Badge component as a dot when you don't provide and content prop.

import { Badge, Button } from "@material-tailwind/react";

export function BadgeDot() {
  return (
    <Badge>
      <Button>Settings</Button>
    </Badge>
  );
}

## Badge Custom Styles

You can use the className prop to add custom styles to the Badge component.

import { Badge, Button } from "@material-tailwind/react";
import {CheckIcon} from "@heroicons/react/24/outline";

export function BadgeCustomStyles() {
  return (
    <Badge
      content={<CheckIcon className="h-4 w-4 text-white" strokeWidth={2.5} />}
      className="bg-gradient-to-tr from-green-400 to-green-600 border-2 border-white shadow-lg shadow-black/20"
    >
      <Button>Notifications</Button>
    </Badge>
  );
}

## Badge Props

The following props are available for badge component. These are the custom props that we've added for the badge component and you can use all the other native props as well.

Attribute	Type	Description	Default
`color`	Color	Change badge color	`red`
`invisible`	`boolean`	Change the badge visibility	`false`
`withBorder`	`boolean`	Add white border around badge	`false`
`overlap`	overlap	Shape the badge should overlap.	`square`
`content`	`node`	Add content for the badge	`undefined`
`children`	`node`	The element that badge should be add to	`undefined`
`placement`	Placement	Change the badge placement	`top-end`
`className`	`string`	Add custom className for badge	`''`
`containerProps`	`object`	Add custom props for badge container	`undefined`
`containerRef`	`ref`	Reference to badge container.	`undefined`

For TypeScript Only

import type { BadgeProps } from "@material-tailwind/react";

## Types - Color

type color =
  | "white"
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

## Types - Overlap

type size = "circular" | "square";

## Types - Placement

type placement = "top-start" | "top-end" | "bottom-start" | "bottom-end";

## Badge Theme

Learn how to customize the theme and styles for badge component, the theme object for badge component has three main objects:

A. The defaultProps object for setting up the default value for props of badge component.
B. The valid object for customizing the valid values for badge component props.
C. The styles object for customizing the theme and styles of badge component.

You can customize the theme and styles of badge component by adding Tailwind CSS classes as key paired values for objects.

## Badge Theme Object Type

interface BadgeStyleTypes {
  defaultProps?: {
    color?: string;
    invisible?: boolean;
    placement?: string;
    withBorder?: boolean;
    overlap?: string;
    content?: node;
    className?: string;
    containerProps?: object;
  };
  valid?: {
    colors?: string[];
    overlaps?: string[];
    placements?: string[];
  };
  styles?: {
    base?: {
      container?: object;
      badge?: {
        initial?: object;
        withBorder?: object;
        withContent?: object;
      };
    };
    placements?: {
      "top-start"?: {
        square?: object;
        circular?: object;
      };
      "top-end"?: {
        square?: object;
        circular?: object;
      };
      "bottom-start"?: {
        square?: object;
        circular?: object;
      };
      "bottom-end"?: {
        square?: object;
        circular?: object;
      };
    };
    colors?: object;
  };
}

For TypeScript Only

import type { BadgeStyleTypes } from "@material-tailwind/react";

## Badge Theme Customization

const theme = {
  badge: {
    defaultProps: {
      color: "red",
      invisible: false,
      withBorder: false,
      overlap: "square",
      content: undefined,
      placement: "top-end",
      className: undefined,
      containerProps: undefined,
    },
    valid: {
      colors: [
        "white",
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
      overlaps: ["circular", "square"],
      placements: ["top-start", "top-end", "bottom-start", "bottom-end"],
    },
    styles: {
      base: {
        container: {
          position: "relative",
          display: "inline-flex",
        },
        badge: {
          initial: {
            position: "absolute",
            minWidth: "min-w-[12px]",
            minHeight: "min-h-[12px]",
            borderRadius: "rounded-full",
            paddingY: "py-1",
            paddingX: "px-1",
            fontSize: "text-xs",
            fontWeight: "font-medium",
            content: "content-['']",
            lineHeight: "leading-none",
            display: "grid",
            placeItems: "place-items-center",
          },
          withBorder: {
            borderWidth: "border-2",
            borderColor: "border-white",
          },
          withContent: {
            minWidth: "min-w-[24px]",
            minHeight: "min-h-[24px]",
          },
        },
      },
      placements: {
        "top-start": {
          square: {
            top: "top-[4%]",
            left: "left-[2%]",
            translateX: "-translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
          circular: {
            top: "top-[14%]",
            left: "left-[14%]",
            translateX: "-translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
        },
        "top-end": {
          square: {
            top: "top-[4%]",
            right: "right-[2%]",
            translateX: "translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
          circular: {
            top: "top-[14%]",
            right: "right-[14%]",
            translateX: "translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
        },
        "bottom-start": {
          square: {
            bottom: "bottom-[4%]",
            left: "left-[2%]",
            translateX: "-translate-x-2/4",
            translateY: "translate-y-2/4",
          },
          circular: {
            bottom: "bottom-[14%]",
            left: "left-[14%]",
            translateX: "-translate-x-2/4",
            translateY: "translate-y-2/4",
          },
        },
        "bottom-end": {
          square: {
            bottom: "bottom-[4%]",
            right: "right-[2%]",
            translateX: "translate-x-2/4",
            translateY: "translate-y-2/4",
          },
          circular: {
            bottom: "bottom-[14%]",
            right: "right-[14%]",
            translateX: "translate-x-2/4",
            translateY: "translate-y-2/4",
          },
        },
      },
      colors: {
        white: {
          backgroud: "bg-white",
          color: "text-blue-gray-900",
        },
        "blue-gray": {
          backgroud: "bg-blue-gray-500",
          color: "text-white",
        },
        gray: {
          backgroud: "bg-gray-500",
          color: "text-white",
        },
        brown: {
          backgroud: "bg-brown-500",
          color: "text-white",
        },
        "deep-orange": {
          backgroud: "bg-deep-orange-500",
          color: "text-white",
        },
        orange: {
          backgroud: "bg-orange-500",
          color: "text-white",
        },
        amber: {
          backgroud: "bg-amber-500",
          color: "text-black",
        },
        yellow: {
          backgroud: "bg-yellow-500",
          color: "text-black",
        },
        lime: {
          backgroud: "bg-lime-500",
          color: "text-black",
        },
        "light-green": {
          backgroud: "bg-light-green-500",
          color: "text-white",
        },
        green: {
          backgroud: "bg-green-500",
          color: "text-white",
        },
        teal: {
          backgroud: "bg-teal-500",
          color: "text-white",
        },
        cyan: {
          backgroud: "bg-cyan-500",
          color: "text-white",
        },
        "light-blue": {
          backgroud: "bg-light-blue-500",
          color: "text-white",
        },
        blue: {
          backgroud: "bg-blue-500",
          color: "text-white",
        },
        indigo: {
          backgroud: "bg-indigo-500",
          color: "text-white",
        },
        "deep-purple": {
          backgroud: "bg-deep-purple-500",
          color: "text-white",
        },
        purple: {
          backgroud: "bg-purple-500",
          color: "text-white",
        },
        pink: {
          backgroud: "bg-pink-500",
          color: "text-white",
        },
        red: {
          backgroud: "bg-red-500",
          color: "text-white",
        },
      },
    },
  },
};

## Explore More Tailwind CSS Examples

Looking for more badge examples? Check out our Table Examples from Material Tailwind Blocks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

For TypeScript Only

For TypeScript Only

Uh oh!

FilesExpand file tree

badge.mdx

Latest commit

History

badge.mdx

File metadata and controls

For TypeScript Only

For TypeScript Only