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

Tag Library Documentation: |

A simple badge rendered with `<tc:badge value="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>

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"/>

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"/>

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>