intro

Badge

A small pill component used to denote status, categories, or tags.

Badge

The Badge component is a small, atomic element used to display succinct information such as status, categories, or tags. It adheres strictly to the Curva & Concreto design principles by utilizing the --r-pill curve for its border radius and geometric precision for its typography.

Default Azul Verde Sucesso Ouro Alerta

Usage

The Badge atom is typically used within complex molecules or organisms, like the MultiSelect or StatusBadge components. It utilizes Svelte 5 snippets to receive its content.

<script>
  import { Badge } from 'cobogo';
</script>

<Badge variant="verde">Aprovado</Badge>

Props

Prop	Type	Default	Description
`children`	`Snippet`	`undefined`	The content to display inside the badge.
`variant`	`'azul' \| 'verde' \| 'ouro'`	`'azul'`	The color variant of the badge.
`class`	`string`	`""`	Additional CSS classes for custom styling.

Variants

The Badge supports three distinct variants, directly mapping to the primary semantic colors of the system:

Azul: The default variant, used for informational or neutral tags.
Verde: Used to denote success, active, or positive status.
Ouro: Used for warnings, pending states, or alerts requiring attention.

Styling Characteristics

Badges utilize the --font-sans typeface (Archivo), rendered in uppercase with tight font weight (700) and wide letter spacing (0.1em) to remain highly legible even at the small --t-micro size.