Badge
Badges are used to highlight an item's status for quick recognition.
Basic Example
To create a badge component with only text inside, pass the text as an argument.
Styling
Size
The size prop controls the size and padding of a badge. It can take values of "1" | "2", with default being "1".
Variant
The variant prop controls the visual style of the badge. The supported variant types are "solid" | "soft" | "surface" | "outline". The variant default is "soft".
Color Scheme
The color_scheme prop sets a specific color, ignoring the global theme.
High Contrast
The high_contrast prop increases color contrast of the fallback text with the background.
Radius
The radius prop sets specific radius value, ignoring the global theme. It can take values "none" | "small" | "medium" | "large" | "full".
Final Example
A badge may contain more complex elements within it. This example uses a flex component to align an icon and the text correctly, using the gap prop to
ensure a comfortable spacing between the two.
8.8%
API Reference
rx.badge
A stylized badge element.
variantsizecolor_schemehigh_contrastradiusProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
variant | "solid""soft""surface""outline" | The variant of the badge. |
size | "1""2""3" | The size of the badge. |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Color theme of the badge. |
high_contrast | bool | Whether to render the badge with higher contrast color against background. |
radius | "none""small""medium""large""full" | Override theme radius for badge: "none" | "small" | "medium" | "large" | "full". |