Pular para o conteúdo
AsterUI v0.12.76

Badge

Emblemas de notificação, indicadores de status e fitas para destacar conteúdo.

Importação

Seção intitulada “Importação”
import { Badge } from 'asterui'

Exemplos

Seção intitulada “Exemplos”

Emblemas de Notificação Básicos

Exibir emblemas de contagem em 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

Contagem de Overflow

Mostrar contagem+ ao exceder o limite de overflow.

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

Posicionamento de Emblema

Posicionar emblemas em qualquer um dos 9 cantos.

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

Deslocamento de Emblema

Ajustar finamente a posição do emblema com deslocamentos de pixel.

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

Emblemas de Status

Indicadores de status com rótulos de texto opcionais.

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

Emblemas de Fita

Emblemas decorativos em estilo de fita 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

Cores de Fita

Fitas suportam diferentes tipos de cor e cores personalizadas.

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

Emblemas de Ponto

Indicadores circulares pequenos para presença ou status.

 
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

Cores de Emblema

Emblemas de contagem independentes com cores diferentes.

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

Cores Personalizadas

Use a prop color para cores de emblema personalizadas.

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

Tamanhos de Emblema

Cinco tamanhos disponíveis para emblemas.

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 Zero

Exibir emblema mesmo quando a contagem é 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 Emblema

Diferentes estilos visuais para emblemas.

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

Seção intitulada “API”

Badge

Seção intitulada “Badge”
PropriedadeDescriçãoTipoPadrão
countNúmero para exibir no emblemanumber-
showZeroSe deve exibir o emblema quando a contagem é 0booleanfalse
overflowCountContagem máxima para mostrar antes de exibir contagem+number99
positionPosição do emblema ao envolver filhos'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''top-end'
offsetDeslocamento da posição padrão em pixels [x, y][number, number]-
statusModo de emblema de status com ponto colorido'success' | 'processing' | 'error' | 'default' | 'warning'-
textTexto para exibir com emblema de statusstring-
dotMostrar um pequeno ponto circular em vez de contagembooleanfalse
typeTipo de cor do emblema'default' | 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error''error'
sizeTamanho do emblema'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
variantVariante de estilo do emblema'solid' | 'outline' | 'dash' | 'soft' | 'ghost''solid'
colorCor de fundo personalizadastring-
childrenElemento para envolver com emblema (modo de notificação)ReactNode-

Badge.Ribbon

Seção intitulada “Badge.Ribbon”
PropriedadeDescriçãoTipoPadrão
textConteúdo de texto da fitastringobrigatório
placementPosicionamento da fita'start' | 'end''end'
typeTipo de cor da fitaIgual ao tipo Badge'primary'
colorCor de fundo personalizadastring-
childrenElemento para envolver com fitaReactNodeobrigatório

Acessibilidade

Seção intitulada “Acessibilidade”
  • Usa role="status" para emblemas de status
  • Fornece aria-label para leitores de tela com contagem ou status de notificação
  • Status de processamento inclui animação de pulso visual