Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

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 and tip.

<tc:badge value="image" image="/demo-6-snapshot/image/feather-leaf.png" tip="badge tip"/> <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> primary secondary danger warning success info light dark
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.