Components

Badge

Enhance UI with Semji badges using Tailwind CSS. Create customizable status indicators or tags for web applications.

Variants

Solid badges

The standard format for badge is component class `badge`, accompanied by modifier class `badge-{semantic-color}`.

Default Primary Secondary Accent Info Success Warning Error

Soft badges

Add modifier class `badge-soft` for soft colored badges.

Default Primary Secondary Accent Info Success Warning Error

Outline badges

Add modifier class `badge-outline` for outline badges.

Default Primary Secondary Accent Info Success Warning Error

Shapes

Pill badges

Use the `rounded-full` utility class to make badges pilled. The default shape of the badges but can be altered by using TailwindCSS <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">Border Radius</a> utility classes.

Primary Primary Primary

Rounded badges

This is the Default shape of the badge.

Primary Primary Primary

Sizes

Size variants

Add responsive class `badge-{size}` where `{size} = xs|sm|md|lg|xl` for badges of different sizes.

1 2 3 4 5

Illustrations

Badge links

Use badges in anchor tags for clickable badge links.

Primary Secondary Success Error Warning Info

Dot style badges

Use badge with utility classes `height(h)`, `width(w)` or `size` & `p-0` for dot style badges.

Default

Primary

Secondary

Success

Error

Warning

Info

Dashed badges

You can achieve this style by combining the `border-dashed` utility class with the `badge-outline` modifier class.

Default Primary Secondary Accent Info Success Warning Error

Badge with icons — Icon badges (rounded)

Use `svg` or `icons` inside badges for icon badges.

Badge with icons — Icon badges (circular)

Add utility classes `rounded-full`, `size` & `p-0` for circular Icon badges.

Badge in a text

Badges used in text `inherit` the font size of the immediate parent element.

Heading NEW

Badge in a button

Add badges to buttons to display additional information in buttons.

Avatar badges

Use the `img` tag to display avatar badges with an image.

John

Anna

Sophia

Dismissible badges

Default chips

Dismissible badges are also referred as chips.

Badge Badge Badge

Avatar chips

A simple example of dismissible avatar badges.

John

Anna

Sophia

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`badge`	component	Base class for the badge component.
`badge-soft`	style	Soft colored badge.
`badge-outline`	style	Transparent badge with colored border.
`badge-primary`	color	Badge with 'primary' color.
`badge-secondary`	color	Badge with 'secondary' color.
`badge-accent`	color	Badge with 'accent' color.
`badge-info`	color	Badge with 'info' color.
`badge-success`	color	Badge with 'success' color.
`badge-warning`	color	Badge with 'warning' color.
`badge-error`	color	Badge with 'error' color.
`badge-xs`	size	Badge with extra small size.
`badge-sm`	size	Badge with small size.
`badge-md`	size	Badge with medium(default) size.
`badge-lg`	size	Badge with large size.
`badge-xl`	size	Badge with extra-large size.