cosmemilton-ui/serverDados & visualizacao

CmBadge

Use badges para complementar informacao sem competir com a acao principal da tela.

Import

tsx
import { CmBadge } from "cosmemilton-ui/server";

Variantes e tons

PrincipalPagoPendenteBloqueadoNovoBeta
tsx
import { CmBadge, CmRow } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmRow gap="sm" align="center" wrap>
      <CmBadge tone="primary">Principal</CmBadge>
      <CmBadge tone="success" variant="solid">Pago</CmBadge>
      <CmBadge tone="warning" variant="outline">Pendente</CmBadge>
      <CmBadge tone="danger" variant="soft">Bloqueado</CmBadge>
      <CmBadge tone="info">Novo</CmBadge>
      <CmBadge tone="accent">Beta</CmBadge>
    </CmRow>
  );
}

API rapida

CmBadge

varianttoneasChildchildren