#Badge

A Badge is a small label for a status or a count, such as "New" or "12". Put it next to a title, in a list row, or on the corner of a button or a UserAvatar.

How to add a badge:

<tb:Badge text="New" />
<tb:Badge text="Online" tone="Success" />
<tb:Badge count="120" tone="Error" />
<ui:VisualElement>
    <ui:Button text="Inbox" name="inbox" />
    <tb:Badge name="unread" count="5" tone="Error" corner="true" />
</ui:VisualElement>
<tb:Badge text="Draft" tone="Warning" outline="true" />
<tb:Badge name="filter" text="Clear filter" outline="true" clickable="true" />

var unread = root.Q<Badge>("unread");
mailbox.Changed += () => unread.Count = mailbox.UnreadCount; // 0 hides the badge

var filter = root.Q<Badge>("filter");
filter.Icon = Background.FromSprite(closeIcon);
filter.Clicked += ClearFilter;

• A badge takes no pointer events, unless Clickable is on. A click on a corner badge goes to the button under it.
• A clickable badge works with the mouse, the keyboard and a gamepad: Enter, Space or the submit button on the focused badge raises Clicked.
• A corner badge is a child of the element that it marks. That parent must not clip its content (overflow: hidden).
• Do not put a badge in a Button or a Label. A text element with a child does not measure its text, so the button becomes too narrow. Put the button and the badge in one container, as in the example.

Tips:

• Use Count for a number that changes. The badge hides itself at 0, so you write no if.
• Use the tones for a meaning, not for decoration: Error for a problem, Warning for a limit, Success for a good state.
• For a status dot on a picture, put <tb:Badge dot="true" corner="true" tone="Success" /> in a UserAvatar.

#Styling

To make the error badges square and move the corner badges in:

.tb-badge--error { border-radius: 2px; }
.tb-badge--corner { top: 0; right: 0; }