t-badge
A component to display badge like texts or components to highlight information to users or to just draw attention to a specific element.
Basic Usage
Use it inline to display information like numbers.
7
<TBadge value="7" />
Usage with t-icon
Assign the attach property or offset values to make it attached to its child element.
+9
<TBadge
color="success"
value="+9"
size="sm"
top="-12"
end="-12" //
>
<TIcon
color="success"
size="24"
icon="mdi:bell" //
/>
</TBadge>
Usage with t-button
+99
<TBadge
color="primary"
value="+99"
inline //
>
<TButton
design="flat"
icon="mdi:account"
me="sm" //
>
Notifications
</TButton>
</TBadge>
Usage with t-icon-button
+9
<TBadge
design="raised"
color="surface"
textColor="alert"
size="md"
weight="bold"
value="+9"
top="-12"
end="-12"
elevated //
>
<TIconButton
design="raised"
color="alert"
size="lg"
icon="mdi:bell" //
/>
</TBadge>
Usage with an Avatar and Slot
<TBadge
design="raised"
color="danger"
size="xl"
value={() => <TIcon size="16" icon="mdi:account" />}
top="-5"
start="-"
fill
>
<TImage class="w-16 h-16 rounded-full overflow-hidden" src="..." />
</TBadge>
API
No options available