Badge

Badges de notification, indicateurs de statut et rubans pour mettre en évidence du contenu.

Importation

import { Badge } from 'asterui'

Exemples

Badges de notification basiques

Afficher des badges de comptage sur les éléments.

</>

5Messages

99Notifications

No Count

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

Nombre de dépassement

Afficher nombre+ lorsque le seuil de dépassement est dépassé.

</>

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

Positionnement du badge

Positionner les badges à l'un des 9 coins.

</>

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

Décalage du badge

Ajuster finement la position du badge avec des décalages en pixels.

</>

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

Badges de statut

Indicateurs de statut avec étiquettes de texte optionnelles.

</>

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

Badges ruban

Badges décoratifs de style ruban utilisant 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

Couleurs de ruban

Les rubans prennent en charge différents types de couleurs et couleurs personnalisées.

</>

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

Badges point

Petits indicateurs circulaires pour la présence ou le statut.

</>

Notifications

Online

Pending

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

Couleurs de badge

Badges de comptage autonomes avec différentes couleurs.

</>

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

Couleurs personnalisées

Utiliser la prop color pour des couleurs de badge personnalisées.

</>

5Purple

5Magenta

5Green

5Gold

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

Tailles de badge

Cinq tailles disponibles pour les badges.

</>

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

Afficher zéro

Afficher le badge même lorsque le nombre est 0.

</>

0Messages

Hidden Zero

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 badge

Différents styles visuels pour les badges.

</>

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

Badge

Propriété	Description	Type	Défaut
count	Nombre à afficher dans le badge	number	-
showZero	Afficher le badge lorsque le nombre est 0	boolean	false
overflowCount	Nombre maximum à afficher avant d’afficher nombre+	number	99
position	Position du badge lors de l’enveloppement des enfants	'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'	'top-end'
offset	Décalage par rapport à la position par défaut en pixels [x, y]	[number, number]	-
status	Mode badge de statut avec point coloré	'success' | 'processing' | 'error' | 'default' | 'warning'	-
text	Texte à afficher avec le badge de statut	string	-
dot	Afficher un petit point circulaire au lieu du nombre	boolean	false
type	Type de couleur du badge	'default' | 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'	'error'
size	Taille du badge	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
variant	Variante de style du badge	'solid' | 'outline' | 'dash' | 'soft' | 'ghost'	'solid'
color	Couleur d’arrière-plan personnalisée	string	-
children	Élément à envelopper avec le badge (mode notification)	ReactNode	-

Badge.Ribbon

Propriété	Description	Type	Défaut
text	Contenu texte du ruban	string	requis
placement	Placement du ruban	'start' | 'end'	'end'
type	Type de couleur du ruban	Identique au type Badge	'primary'
color	Couleur d’arrière-plan personnalisée	string	-
children	Élément à envelopper avec le ruban	ReactNode	requis

Accessibilité

• Utilise role="status" pour les badges de statut
• Fournit aria-label pour les lecteurs d’écran avec le nombre ou le statut de notification
• Le statut de traitement inclut une animation de pulsation visuelle