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="fa-times" 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="fa-times" markup="badge secondary"/>
    </tc:buttons>