Use responsive badges component with helper examples for sizing, colors, pill badges, variations of ui badges & more. Free download, open-source license.

Basic examples

Badge is an element for the use of drawing attention to additional interface information with eye-catching appeal, typically displaying unread messages count.

Example heading New

HTML

        
            
      <h2 class="text-4xl font-medium leading-tight">
        Example heading
        <span
          class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
          >New</span
        >
      </h2>

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Sizes

Badge can be displayed in a few different sizes.

Example heading New

HTML

        
            


      <h1 class="mb-2.5 mt-0 text-5xl font-medium leading-tight">
        Example heading
        <span
          class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
          >New</span
        >
      </h1>
      <h2 class="mb-2.5 text-4xl font-medium leading-tight">
        Example heading
        <span
          class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
          >New</span
        >
      </h2>
      <h3 class="mb-2.5 text-3xl font-medium leading-tight">
        Example heading
        <span
          class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
          >New</span
        >
      </h3>
      <h4 class="mb-2.5 text-2xl font-medium leading-tight">
        Example heading
        <span
          class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
          >New</span
        >
      </h4>
      <h5 class="mb-2.5 text-xl font-medium leading-tight">
        Example heading
        <span
          class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
          >New</span
        >
      </h5>
      <h6 class="text-base font-medium leading-tight">
        Example heading
        <span
          class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
          >New</span
        >
      </h6>

Button

The badge can also be placed inside the button to display, for example, the number of notifications or necessary actions to perform.

HTML

        
            
      <button
        type="button"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Notifications
        <span
          class="ms-2 inline-block whitespace-nowrap rounded-[0.27rem] bg-danger-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500"
          >7</span
        >
      </button>

Colors

The background color can be modified to change the badge's appeal.

Primary Secondary Success Danger Warning Info Light Dark

HTML

        
            
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500">
        Primary
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-secondary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-secondary-800 dark:bg-[#202124] dark:text-secondary-400">
        Secondary
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-success-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-success-700 dark:bg-green-950 dark:text-success-500/80">
        Success
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-danger-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500">
        Danger
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-warning-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-warning-800 dark:bg-[#2e2005] dark:text-warning-500">
        Warning
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-info-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-info-800 dark:bg-[#11242a] dark:text-info-500">
        Info
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-neutral-50 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-zinc-600 dark:bg-surface dark:text-neutral-100">
        Light
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-neutral-800 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-zinc-100 dark:bg-neutral-800">
        Dark
      </span>

Pills

Use the .rounded-full utility class to make badges more rounded with a larger border-radius.

Primary Secondary Success Danger Warning Info Light Dark

HTML

        
            
      <span
        class="inline-block whitespace-nowrap rounded-full bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500">
        Primary
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-full bg-secondary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-secondary-800 dark:bg-[#202124] dark:text-secondary-400 ">
        Secondary
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-full bg-success-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-success-700 dark:bg-green-950 dark:text-success-500/80">
        Success
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-full bg-danger-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500 ">
        Danger
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-full bg-warning-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-warning-800 dark:bg-[#2e2005] dark:text-warning-500">
        Warning
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-full bg-info-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-info-800 dark:bg-[#11242a] dark:text-info-500">
        Info
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-full bg-neutral-50 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-zinc-600 dark:bg-surface dark:text-neutral-100">
        Light
      </span>
      <span
        class="inline-block whitespace-nowrap rounded-full bg-neutral-800 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-zinc-100 dark:bg-neutral-800">
        Dark
      </span>

Badges

Tailwind CSS Badges

Basic examples