Ir al contenido
AsterUI v0.12.76

Badge

Insignias de notificación, indicadores de estado y cintas para resaltar contenido.

Importar

Sección titulada «Importar»
import { Badge } from 'asterui'

Ejemplos

Sección titulada «Ejemplos»

Insignias de Notificación Básicas

Muestra insignias de conteo en elementos.

5
99
 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge count={5}>
          <Button>Messages</Button>
        </Badge>
        <Badge count={99}>
          <Button color="secondary">Notifications</Button>
        </Badge>
        <Badge count={0}>
          <Button color="accent">No Count</Button>
        </Badge>
      </Space>
    )
}

export default App

Conteo de Desbordamiento

Muestra conteo+ cuando se excede el umbral de desbordamiento.

99
U
99+
U
999+
U
 
import { Badge, Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" align="center" wrap>
        <Badge count={99}>
          <Avatar size="lg">U</Avatar>
        </Badge>
        <Badge count={100} overflowCount={99}>
          <Avatar size="lg">U</Avatar>
        </Badge>
        <Badge count={1000} overflowCount={999}>
          <Avatar size="lg">U</Avatar>
        </Badge>
      </Space>
    )
}

export default App

Posicionamiento de Insignia

Posiciona las insignias en cualquiera de las 9 esquinas.

5
TL
5
TC
5
TR
5
BL
5
BR
 
import { Badge, Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge count={5} position="top-start">
          <Avatar size="lg">TL</Avatar>
        </Badge>
        <Badge count={5} position="top-center">
          <Avatar size="lg">TC</Avatar>
        </Badge>
        <Badge count={5} position="top-end">
          <Avatar size="lg">TR</Avatar>
        </Badge>
        <Badge count={5} position="bottom-start">
          <Avatar size="lg">BL</Avatar>
        </Badge>
        <Badge count={5} position="bottom-end">
          <Avatar size="lg">BR</Avatar>
        </Badge>
      </Space>
    )
}

export default App

Desplazamiento de Insignia

Ajusta finamente la posición de la insignia con desplazamientos en píxeles.

5
Default
5
Offset
5
Down
 
import { Badge, Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg">
        <Badge count={5}>
          <Avatar size="lg">Default</Avatar>
        </Badge>
        <Badge count={5} offset={[-5, 5]}>
          <Avatar size="lg">Offset</Avatar>
        </Badge>
        <Badge count={5} offset={[0, 10]}>
          <Avatar size="lg">Down</Avatar>
        </Badge>
      </Space>
    )
}

export default App

Insignias de Estado

Indicadores de estado con etiquetas de texto opcionales.

SuccessProcessingErrorWarningDefault
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Badge status="success" text="Success" />
        <Badge status="processing" text="Processing" />
        <Badge status="error" text="Error" />
        <Badge status="warning" text="Warning" />
        <Badge status="default" text="Default" />
      </Space>
    )
}

export default App

Insignias de Cinta

Insignias decorativas estilo cinta usando Badge.Ribbon.

Premium Plan

Best value for teams
Recommended

Pro Plan

For professionals
New
 
import { Badge, Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge.Ribbon text="Recommended">
          <Card title="Premium Plan" variant="border" className="w-48">
            Best value for teams
          </Card>
        </Badge.Ribbon>
        <Badge.Ribbon text="New" placement="start">
          <Card title="Pro Plan" variant="border" className="w-48">
            For professionals
          </Card>
        </Badge.Ribbon>
      </Space>
    )
}

export default App

Colores de Cinta

Las cintas admiten diferentes tipos de color y colores personalizados.

Primary Ribbon

Card content
Primary

Success Ribbon

Card content
Success

Custom Color

Card content
Custom
 
import { Badge, Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <Badge.Ribbon text="Primary" type="primary">
          <Card title="Primary Ribbon" variant="border" className="w-48">Card content</Card>
        </Badge.Ribbon>
        <Badge.Ribbon text="Success" type="success">
          <Card title="Success Ribbon" variant="border" className="w-48">Card content</Card>
        </Badge.Ribbon>
        <Badge.Ribbon text="Custom" color="#722ed1">
          <Card title="Custom Color" variant="border" className="w-48">Card content</Card>
        </Badge.Ribbon>
      </Space>
    )
}

export default App

Insignias de Punto

Pequeños indicadores circulares para presencia o estado.

 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge dot type="error">
          <Button>Notifications</Button>
        </Badge>
        <Badge dot type="success">
          <Button variant="ghost">Online</Button>
        </Badge>
        <Badge dot type="warning">
          <Button color="secondary">Pending</Button>
        </Badge>
      </Space>
    )
}

export default App

Colores de Insignia

Insignias de conteo independientes con diferentes colores.

55555555
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Badge count={5} />
        <Badge count={5} type="primary" />
        <Badge count={5} type="secondary" />
        <Badge count={5} type="accent" />
        <Badge count={5} type="info" />
        <Badge count={5} type="success" />
        <Badge count={5} type="warning" />
        <Badge count={5} type="error" />
      </Space>
    )
}

export default App

Colores Personalizados

Usa la prop color para colores de insignia personalizados.

5
5
5
5
 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md">
        <Badge count={5} color="#722ed1">
          <Button>Purple</Button>
        </Badge>
        <Badge count={5} color="#eb2f96">
          <Button>Magenta</Button>
        </Badge>
        <Badge count={5} color="#52c41a">
          <Button>Green</Button>
        </Badge>
        <Badge count={5} color="#faad14">
          <Button>Gold</Button>
        </Badge>
      </Space>
    )
}

export default App

Tamaños de Insignia

Cinco tamaños disponibles para insignias.

55555
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" align="center">
        <Badge count={5} type="primary" size="xs" />
        <Badge count={5} type="primary" size="sm" />
        <Badge count={5} type="primary" size="md" />
        <Badge count={5} type="primary" size="lg" />
        <Badge count={5} type="primary" size="xl" />
      </Space>
    )
}

export default App

Mostrar Cero

Muestra la insignia incluso cuando el conteo es 0.

0
 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg">
        <Badge count={0} showZero>
          <Button>Messages</Button>
        </Badge>
        <Badge count={0}>
          <Button color="secondary">Hidden Zero</Button>
        </Badge>
      </Space>
    )
}

export default App

Variantes de Insignia

Diferentes estilos visuales para insignias.

555
555
555
555
555
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="solid" />
          <Badge count={5} type="secondary" variant="solid" />
          <Badge count={5} type="accent" variant="solid" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="outline" />
          <Badge count={5} type="secondary" variant="outline" />
          <Badge count={5} type="accent" variant="outline" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="soft" />
          <Badge count={5} type="secondary" variant="soft" />
          <Badge count={5} type="accent" variant="soft" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="dash" />
          <Badge count={5} type="secondary" variant="dash" />
          <Badge count={5} type="accent" variant="dash" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="ghost" />
          <Badge count={5} type="secondary" variant="ghost" />
          <Badge count={5} type="accent" variant="ghost" />
        </Space>
      </Space>
    )
}

export default App

API

Sección titulada «API»

Badge

Sección titulada «Badge»
PropiedadDescripciónTipoPredeterminado
countNúmero a mostrar en la insignianumber-
showZeroSi mostrar la insignia cuando el conteo es 0booleanfalse
overflowCountConteo máximo a mostrar antes de mostrar conteo+number99
positionPosición de la insignia al envolver children'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''top-end'
offsetDesplazamiento desde la posición predeterminada en píxeles [x, y][number, number]-
statusModo de insignia de estado con punto de color'success' | 'processing' | 'error' | 'default' | 'warning'-
textTexto a mostrar con insignia de estadostring-
dotMostrar un pequeño punto circular en lugar de conteobooleanfalse
typeTipo de color de insignia'default' | 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error''error'
sizeTamaño de insignia'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
variantVariante de estilo de insignia'solid' | 'outline' | 'dash' | 'soft' | 'ghost''solid'
colorColor de fondo personalizadostring-
childrenElemento a envolver con insignia (modo notificación)ReactNode-

Badge.Ribbon

Sección titulada «Badge.Ribbon»
PropiedadDescripciónTipoPredeterminado
textContenido de texto de la cintastringrequerido
placementUbicación de la cinta'start' | 'end''end'
typeTipo de color de cintaIgual que tipo de Badge'primary'
colorColor de fondo personalizadostring-
childrenElemento a envolver con cintaReactNoderequerido

Accesibilidad

Sección titulada «Accesibilidad»
  • Usa role="status" para insignias de estado
  • Proporciona aria-label para lectores de pantalla con conteo o estado de notificación
  • El estado de procesamiento incluye animación de pulso visual