[component]
Dev Mode
SelectBadge
Description
SelectBadge is an interactive badge that can open a dropdown with selectable options.
Option 1
Status
Secondary
Disabled
Usage Guidelines
Do
Use to show status and allow selecting one or more options
Use consistent colors for each status type
Use concise option labels
Don't
Overload with too many options
Use for non-interactive status-only indicators
Accessibility
Ensure options are accessible via screen readers
Do not rely solely on color to convey meaning
Props
Name
Type
Required
Description
onChange
Required
The function to call when the selected value changes.
options
Required
The options available for the dropdown badge. Each option should have a label and a value.
customBackgroundColor
string
When status is "custom", determines the badge's background color.
customBorderColor
string
When status is "custom", determines the badge's border color.
customTextColor
string
When status is "custom", determines the badge's text color.
disabled
boolean
If true, the badge will be disabled and not interactive.
secondary
boolean
If true, the badge will have a secondary style.
status
The status of the badge. Determines its color and appearance.
value
string
The current value of the select field.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Examples
Badge vs SelectBadge
Badge vs SelectBadge — size comparison
Both should be 20px tall and visually aligned.
Info
Badge
Active
Success
Badge
Active
Warning
Badge
Active
Error
Badge
Active
Neutral
Badge
Active
Secondary variants
Secondary
Badge
Active
All Badge variants — height comparison
Text, iconOnly, and numberOnly should all be 20px tall.
Variants
Text
5
Active
SelectBadges
Option 1
Default
Option 1
Disabled
Option 1
Secondary
Option 1
Error
Option 1
Warning
Option 1
Success
Option 1
Neutral
Option 1
Custom