Using a Badge in Oracle APEX

 In Oracle APEX, badges are small visual indicators typically used to highlight numeric values, such as counts, statuses, or notification indicators. They are especially useful when you want to quickly draw attention to a value in reports, lists, cards, or even button labels. APEX makes it easy to integrate badges into your UI using built-in templates or manually with HTML and CSS. This blog explains how to use badges in various ways inside your APEX applications.

How to Use a Badge in Oracle APEX

There are several methods to display a badge, depending on the region type and use case. Here are the most common ways:

1. Badge in a Classic Report or Interactive Report

To show a badge inside a report, you can use HTML in your SQL query.

Example:

SELECT 
  EMPLOYEE_NAME,
  DEPARTMENT,
  '<span class="t-Badge t-Badge--success">' || PROJECT_COUNT || '</span>' AS PROJECTS
FROM EMPLOYEES

Steps:

• In the column where you want to display the badge (e.g., PROJECTS), write a SQL expression that wraps the value with a <span> tag and the t-Badge class.

• In Page Designer, select the column and set Escape Special Characters to No to render the HTML.

2. Badge on a Button

You can also show a badge on a button label, often for notifications or counts.

Steps:

• Edit the Button Label to include the badge HTML.

Example:

Notifications <span class="t-Badge t-Badge--warning">3</span>

3. Badge in a List or Card Report

When using lists or cards, Oracle APEX offers Badge settings as a native feature.

For Lists:

• Go to Shared Components > Navigation Menu (or other list)

• Edit the List Entry.

• Use the “Badge Value” attribute to enter a number or expression.

• You can set “Badge CSS Classes” like t-Badge--success, t-Badge--warning, t-Badge--info.

For Cards:

• When using a Card Region, set the Badge Value in the Attributes tab.

• Customize the Badge Appearance (Color and Position) using predefined styles.

Badge Classes:
Here are some of the most used built-in classes for APEX badges:

• t-Badge--success (green)

• t-Badge--warning (yellow)

• t-Badge--info (blue)

• t-Badge--danger (red)

• t-Badge--primary (default)

• t-Badge--pill (adds rounded edges)

Best Practices

• Use badges for small, focused numeric or status indicators—avoid using them for long text.

• Always set “Escape Special Characters” to No only if you're generating trusted HTML content.

• For dynamic badges (e.g., unread messages), use PL/SQL or SQL queries that update the value in real-time.

• Use consistent colors across the application to avoid confusing users (e.g., green always means success).

• Avoid overusing badges—they should highlight key data, not overwhelm the interface.

Badges are used in reports to display statuses, usually single words such as : Pending, Closed, and Open.

Interactive Report

Now, make the following changes to the following

Badge State:

Badge Icon:

Oracle APEX Documentation

You can read more about badges in Oracle APEX UI components at:
https://docs.oracle.com/en/database/oracle/apex/

Conclusion

Badges in Oracle APEX are a simple but powerful way to improve the visual impact of your application. Whether in reports, lists, cards, or buttons, they help your users quickly identify important values or statuses. By using HTML, native attributes, or template options, you can control how and where badges appear, and style them consistently to align with your application’s design and purpose.