Badge

A simple badge can be created with <tc:badge/>.
Buttons can be displayed as a badge with the badge markup.

Tag Library Documentation: <tc:badge/> | <tc:button/>

Basics

A simple badge rendered with <tc:badge value="Simple Badge"/>.

Simple Badge

Badges can placed inside buttons.

<tc:button label="Unreaded Messages" omit="true" markup="primary"> <tc:badge value="9" markup="light"/> </tc:button>

Badges can be placed inside button groups. So it's possible to use them together with buttons.

<tc:buttons> <tc:badge value="badge" markup="warning"/> <tc:button image="bi-x-lg" markup="badge" tip="remove" omit="true"/> </tc:buttons>

badge

Badges can have an icon.

<tc:badge value="image" image="/demo-5-snapshot/image/feather-leaf.png"/> <tc:badge value="icon" image="bi-airplane"/>

image

icon

Markups

Colors can be set with markups. Markup none unset the color. Markup pill make the shape more rounded. If no markup is set, the secondary theme color will be applied.

<tc:badge value="primary" markup="primary"/> <tc:badge value="secondary" markup="secondary"/> <tc:badge value="danger" markup="danger"/> <tc:badge value="warning" markup="warning"/> <tc:badge value="success" markup="success"/> <tc:badge value="info" markup="info"/> <tc:badge value="light" markup="light"/> <tc:badge value="dark" markup="dark"/> <tc:badge value="none" markup="none"/> <tc:badge value="pill" markup="pill"/>

primary

secondary

danger

warning

success

info

light

dark

none

pill

Buttons

If you need badges with the functionality of buttons use the badge markup.

<tc:button label="Badge Button" markup="badge" omit="true"/> <tc:button label="Pill" markup="badge pill" omit="true"/> <tc:button label="Warning" markup="badge warning" omit="true"/> <tc:button label="Link" markup="badge" link="https://www.apache.org/"/> <tc:button label="Disabled" markup="badge" disabled="true"/>

Link

Button group

This example shows multiple button groups with a badge and a button. Clicking the button will remove the current group.

<tc:buttons> <tc:badge value="label" markup="warning"/> <tc:button image="bi-x-lg" markup="badge secondary"/> </tc:buttons>