# Badge

**Path:** Components/Feedback

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Badge

 RbBadge is a versatile component for displaying notification indicators and status markers.
 It can wrap any content and display numbers, icons, or simple dots with customizable colors, sizes, and positions.
 Perfect for showing notification counts, status indicators, and drawing attention to important elements.

 Basic Usage

 Simple badge usage with numbers, icons, and dots on buttons and other elements.

 Show code

 Number Badges

 Messages 
 5

 Notifications 
 12

 Tasks 
 3

 Updates 
 99

 Big Number (99+) 
 99+

 Icon Badges

 Mail 

 Alerts 

 Completed 

 Featured 

 Online 

 Dot Badges

 Profile 

 Important 

 Active 

 Pending 

 Info 

 Badges on Various Elements

 Notifications 
 8

 Cart 

 24

 SVG Badge 

 Data Image Badge 

 Colors

 Available color variants for different contexts and semantic meanings.

 Show code

 Semantic Colors with Numbers

 Default 
 1

 Primary 
 5

 Secondary 
 7

 Success 
 12

 Danger 
 8

 Warning 
 4

 Info 
 15

 Semantic Colors with Icons

 Default 

 Primary 

 Secondary 

 Success 

 Danger 

 Warning 

 Info 

 Semantic Colors with Dots

 Default 

 Primary 

 Secondary 

 Success 

 Danger 

 Warning 

 Info 

 Inner Badges

 Badge can be displayed numbers, icons, and dots as inner modes.

 Show code

 Number Format

 Single Digit
 1

 Two Digits
 42

 99+ Display
 99+

 Icon Format

 Alert

 Success

 Users

 Dot Format

 Default

 Online

 Offline

 Positioning

 Control badge position with vertical and horizontal alignment options.

 Show code

 All 9 Positions as Default

 5

 5

 5

 5

 5

 5

 5

 5

 5

 All 9 Positions as Inner

 5

 5

 5

 5

 5

 5

 5

 5

 5

 Advanced Features

 Clickable badges, conditional display, and state management.

 Show code

 Clickable Badges

 Click the badge (not the button) to see the action 
 Notifications (Click Badge to Clear) 
 8

 Messages (Click Badge to View) 
 24

 Tasks (Click Badge to Add) 
 5

 Conditional Display

 Show Badge 

 Toggle Premium Status 

 Toggle Warning 

 Conditional Badge 
 15

 Premium User 

 Warning Indicator 

 Dynamic Badge Updates

 Increment

 Decrement

 Change Status

 Dynamic Count 
 42

 Status: Online 

 Multiple Badges on Same Element

 Dual Badge 

 5

 Multiple

 12

 Real-World Examples

 Practical use cases including notifications, shopping carts, and status indicators.

 Show code

 Navigation Menu with Notifications

 Messages

 15

 Tasks

 7

 Notifications

 23

 Settings

 Shopping Cart

 View Cart

 3

 Wishlist

 12

 Add Item to Cart

 User Profile Status

 Go Offline 

 Social Media Notifications

 Friend Requests

 4

 Messages

 18

 Likes

 99+

 Shares

 42

 Email Inbox

 Inbox 
 456 total 
 24

 Starred 
 28 total 
 3

 Sent 
 892 total 

 Drafts 
 15 total 
 2

 Spam 
 234 total 
 67

 Status Indicators

 Server 1 

 Server 2 

 Server 3 

 Server 4 

 Online 

 Warning 

 Offline 

 Product Features

 Product Name

 $99.99 
 Buy 

 On Sale

 $79.99 
 Buy 

 Featured

 $149.99 
 Buy 

 States

 Readonly and disabled states for badges.

 Show code

 Readonly Badges (Non-Clickable)

 Readonly badges cannot be clicked 
 Readonly with Click Handler 
 10

 Readonly Icon Badge 

 Readonly Dot Badge 

 Disabled Badges

 Disabled badges have reduced opacity 
 Disabled with Click Handler 
 10

 Disabled Icon Badge 

 Disabled Dot Badge 

 Clickable vs Non-Clickable

 Click the badges to see the difference 
 Clickable (Normal) 
 0

 Non-Clickable (Readonly) 
 0

 Non-Clickable (Disabled) 
 0

 ✕

 Contents