new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

badge

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Badge radius prop values

The radius prop assigns a specific border radius value to the Badge and accepts values: none, large, and full.

Badge size variants example

Example showing Badge component with three size values: ```jsx <Flex align="center" gap="2"> <Badge size="1" color="indigo">New</Badge> <Badge size="2" color="indigo">New</Badge> <Badge size="3" color="indigo">New</Badge> </Flex> ```

Badge variant styles example

Example showing Badge component with four variant values: ```jsx <Flex gap="2"> <Badge variant="solid" color="indigo">New</Badge> <Badge variant="soft" color="indigo">New</Badge> <Badge variant="surface" color="indigo">New</Badge> <Badge variant="outline" color="indigo">New</Badge> </Flex> ```

Badge color examples

Example showing Badge component with different color values: ```jsx <Flex gap="2"> <Badge color="indigo">New</Badge> <Badge color="cyan">New</Badge> <Badge color="orange">New</Badge> <Badge color="crimson">New</Badge> </Flex> ```

Badge radius prop examples

Example showing Badge component with different radius values: ```jsx <Flex gap="2"> <Badge variant="solid" radius="none" color="indigo">New</Badge> <Badge variant="solid" radius="large" color="indigo">New</Badge> <Badge variant="solid" radius="full" color="indigo">New</Badge> </Flex> ```

Badge is a span-based component

The Badge component is based on the span element and supports common margin props from the Radix Themes layout system.

Badge size prop values

The size prop controls the Badge size and accepts values: 1, 2, and 3.

Badge variant prop values

The variant prop controls the visual style of the Badge and accepts four values: solid, soft, surface, and outline.

Badge color prop values

The color prop assigns a specific color to the Badge. Supported color examples include: indigo, cyan, orange, crimson, blue, green, and gray.

Badge highContrast prop

The highContrast prop is a boolean that increases color contrast between the Badge and the background.

Radix Themes 3.0.0 breaking change: Badge size values

Radix Themes 3.0.0 changed Badge sizes: added new size="3", made size="2" much smaller, and tweaked size="1" dimensions. Replace size="2" usage with size="3".

Give your agent this brain