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

shadcn/ui · Components · all subjects

badge/usage

8 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 basic usage

Import Badge from @/components/ui/badge and use it like this: <Badge variant="default | outline | secondary | destructive">Badge</Badge>

Badge as a link using render prop

The Badge component can be rendered as a link by using the render prop.

Badge basic usage

The Badge component is used with the syntax: <Badge variant="default | outline | secondary | destructive">Badge</Badge>

Badge with icon using data-icon

Icons can be rendered inside the badge using the data-icon attribute. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

Badge with spinner

A spinner can be rendered inside the badge by adding the data-icon="inline-start" or data-icon="inline-end" prop to the spinner element.

Badge as link using asChild

To render a link as a badge, use the asChild prop on the Badge component.

Badge custom colors with classes

Badge colors can be customized by adding custom CSS classes such as bg-green-50 dark:bg-green-800 to the Badge component.

Badge import statement

The Badge component is imported from @/components/ui/badge using: import { Badge } from "@/components/ui/badge"

Give your agent this brain