History

Trinh Ngoc Tu 6a1f89adeb First version with simple frontend and Compose Email by AI		2024-11-29 21:36:41 +01:00
..
dist	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
lib	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
lib-commonjs	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
CHANGELOG.md	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
LICENSE	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
package.json	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
README.md	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00

README.md

@fluentui/react-badge

Badge components for Fluent UI

A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.

Usage

To import Badge:

import { Badge, CounterBadge, PresenceBadge } from '@fluentui/react-components';

Examples

<Badge>999+</Badge>
<Badge appearance="filled">999+</Badge>
<Badge shape="rounded" />
<Badge size="medium" icon={<PasteIcon />} />
<CounterBadge count={5} appearance="ghost" />
<CounterBadge count={0} dot />
<CounterBadge count={5} size="extra-large" />
<PresenceBadge status="available" />
<PresenceBadge status="away" />
<PresenceBadge outOfOffice status="do-not-disturb" />

See Fluent UI Storybook for more detailed usage examples.

Alternatively, run Storybook locally with:

yarn start
Select react-badge from the list.

Specification

See SPEC.md.

Migration Guide

If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating to the latest Badge component implementations.