Component

Badge

Disponible

Badge resalta información breve y complementaria para categorizar estados o aportar contexto rápido. En desktop, el estilo recomendado por defecto es size='small' y shape='square'.

AcreditadoEn esperaRechazadoDevueltoNo iniciadoNovedad

Semantic states · Small default · Square style

Import

Importá el componente Badge desde la librería.

TypeScript

1import 'nave-ui-library/styles.css'
2import { Badge } from 'nave-ui-library/react'

Usage

Uso base con configuración por defecto: size='small' y shape='square'.

Novedad

Variants

Estados semánticos disponibles para comunicar contexto rápido.

AcreditadoEn esperaRechazadoDevueltoNo iniciadoNovedad

Sizes

Tres tamaños con altura definida por diseño: small=20px, medium=24px, large=28px.

SmallMediumLarge

Shapes

Square es el estilo recomendado en desktop. Rounded queda disponible para integraciones específicas.

SquareRounded

API Reference

Props disponibles para el componente Badge.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contenido textual breve del badge.
`tone`	`'neutral' \| 'brand' \| 'success' \| 'info' \| 'warning' \| 'error'`	`neutral`	Semantic tone of the badge.
`size`	`'small' \| 'medium' \| 'large'`	`small`	Controls the badge size and font scale.
`shape`	`'rounded' \| 'square'`	`square`	Defines the badge corner style.
`asChild`	`boolean`	`false`	Renders the badge as a child component, allowing full control over the underlying element.
`className`	`string`	—	Clases adicionales para el elemento raíz.

Registry

Ver configuración técnica del registro

JSON

1{
2  "name": "Badge",
3  "description": "Badge para mostrar etiquetas o estados.",
4  "component": "Badge",
5  "files": [
6    "components/base/data-display/system-feedback/Badge.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "@radix-ui/react-slot",
11    "class-variance-authority"
12  ],
13  "props": {
14    "children": {
15      "type": "ReactNode",
16      "required": true,
17      "description": "Contenido textual breve del badge."
18    },
19    "tone": {
20      "type": "'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'error'",
21      "default": "neutral",
22      "description": "Semantic tone of the badge."
23    },
24    "size": {
25      "type": "'small' | 'medium' | 'large'",
26      "default": "small",
27      "description": "Controls the badge size and font scale."
28    },
29    "shape": {
30      "type": "'rounded' | 'square'",
31      "default": "square",
32      "description": "Defines the badge corner style."
33    },
34    "asChild": {
35      "type": "boolean",
36      "default": false,
37      "description": "Renders the badge as a child component, allowing full control over the underlying element."
38    }
39  }
40}

Prop

Type

Default

Description

children

ReactNode

—

Contenido textual breve del badge.

tone

neutral

Semantic tone of the badge.

size

'small' | 'medium' | 'large'

small

Controls the badge size and font scale.

shape

'rounded' | 'square'

square

Defines the badge corner style.

asChild

boolean

false

Renders the badge as a child component, allowing full control over the underlying element.

className

string

—

Clases adicionales para el elemento raíz.

1{ 2 "name": "Badge", 3 "description": "Badge para mostrar etiquetas o estados.", 4 "component": "Badge", 5 "files": [ 6 "components/base/data-display/system-feedback/Badge.tsx" 7 ], 8 "dependencies": [ 9 "react", 10 "@radix-ui/react-slot", 11 "class-variance-authority" 12 ], 13 "props": { 14 "children": { 15 "type": "ReactNode", 16 "required": true, 17 "description": "Contenido textual breve del badge." 18 }, 19 "tone": { 20 "type": "'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'error'", 21 "default": "neutral", 22 "description": "Semantic tone of the badge." 23 }, 24 "size": { 25 "type": "'small' | 'medium' | 'large'", 26 "default": "small", 27 "description": "Controls the badge size and font scale." 28 }, 29 "shape": { 30 "type": "'rounded' | 'square'", 31 "default": "square", 32 "description": "Defines the badge corner style." 33 }, 34 "asChild": { 35 "type": "boolean", 36 "default": false, 37 "description": "Renders the badge as a child component, allowing full control over the underlying element." 38 } 39 } 40}