Badge¶

Badge adds a small red marker to the corner of another element. The marker shows a count or a dot. The count stops at 99.

Usage¶

Call Components.Badge with a scope and a table of properties:

C.Badge(scope, {
    Count = unread, -- (1)!
    Content = C.IconButton(scope, { Name = "bell" }),
})

The component reads Count once. A count of 0 shows no marker. Set Dot to true to show a dot instead of a number.

Name	Type	Default	Description
`Theme`	`ThemeRef`	The contextual theme	Theme to use for this component instead of the one from `Theme.Provide`.
`LayoutOrder`	`UsedAs<number>`	`0`	Position in a parent `UIListLayout` or `UIGridLayout`.
`Size`	`UsedAs<UDim2>`	-	Size of the component.
`Content`	`Instance`	-	The element to attach the badge to.
`Count`	`UsedAs<number>`	-	Number to show in the marker. Anything above 99 shows as `99`.
`Dot`	`boolean`	`false`	Show a dot instead of a number.