Fundamentos

Badge

Etiqueta de estado: nueve colores en tono suave, dos en sólido, con punto opcional.

import { Badge } from "sebs7n-ui/badge"

Ejemplos

Colores

BorradorNuevoPagadoPendienteVencidoEn revisiónEnviadoArchivadoPrueba

import { Badge } from "sebs7n-ui/badge"

function Colores() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Borrador</Badge>
      <Badge color="brand">Nuevo</Badge>
      <Badge color="green">Pagado</Badge>
      <Badge color="amber">Pendiente</Badge>
      <Badge color="red">Vencido</Badge>
      <Badge color="blue">En revisión</Badge>
      <Badge color="teal">Enviado</Badge>
      <Badge color="purple">Archivado</Badge>
      <Badge color="pink">Prueba</Badge>
    </div>
  )
}

Sólido y con punto

`solid` solo existe en `gray` y `brand`: el resto no llega a 4,5:1.

AdminProActivoCaído

import { Badge } from "sebs7n-ui/badge"

function SolidoYPunto() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="solid">Admin</Badge>
      <Badge variant="solid" color="brand">
        Pro
      </Badge>
      <Badge dot color="green">
        Activo
      </Badge>
      <Badge dot color="red" size="sm">
        Caído
      </Badge>
    </div>
  )
}

En una tabla

`size="sm"` dentro de una fila, para que no infle el alto.

Factura	Estado	Importe
0012	Pagada	$ 128.400
0013	Pendiente	$ 96.000

import { Badge } from "sebs7n-ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "sebs7n-ui/table"

function EnTabla() {
  return (
    <Table density="compact">
      <TableHeader>
        <TableRow>
          <TableHead>Factura</TableHead>
          <TableHead>Estado</TableHead>
          <TableHead numeric>Importe</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>0012</TableCell>
          <TableCell>
            <Badge size="sm" color="green">
              Pagada
            </Badge>
          </TableCell>
          <TableCell numeric>$ 128.400</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>0013</TableCell>
          <TableCell>
            <Badge size="sm" color="amber">
              Pendiente
            </Badge>
          </TableCell>
          <TableCell numeric>$ 96.000</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Badge

Hereda las props de <span>.

Prop	Tipo	Por defecto	Descripción
`color`	`"brand" \| "gray" \| "red" \| "amber" \| "green" \| "blue" \| "teal" \| "purple" \| "pink"`	`"gray"`	Nueve tonos. Con `variant="solid"` el tipo solo deja `gray` y `brand`.
`dot`	`boolean`	`false`	Agrega un punto del color del badge a la izquierda del texto.
`render`	`React.ReactElement \| ComponentRenderFn<RenderFunctionProps, State>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`size`	`"sm" \| "md"`	`"md"`
`variant`	`"subtle" \| "solid"`	`"subtle"`
`className`	`string`	—

Teclado

—: No es interactivo. Si tiene que serlo, render={<button />} y pasa a comportarse como un botón.

Accesibilidad

Es un <span>: no anuncia nada por sí solo. El color no puede ser la única señal — el texto tiene que decir el estado.
solid existe solo en gray y brand porque los 700 de Geist con texto blanco no llegan a 4,5:1 en el resto de los tonos.
El punto (dot) es aria-hidden: es decoración.

Reglas de uso

Estado, no acción. Si se puede hacer click, es un Button o un Toggle.
subtle es el default y el que va en una tabla o en una lista. solid solo para destacar uno entre muchos.
El color tiene que significar algo consistente en toda la app: green pagado, amber pendiente, red vencido. No lo elijas por estética.
size="sm" dentro de una fila de tabla; md suelto.

Relacionados

Button Table Alert