Badge
Индикатор для обозначения уведомления или другой важной информации, относящейся к пункту навигации.
Использование
- Старайтесь снабжать компонент кратким текстом или числом.
- Размещайте компонент в непосредственной близости от целевого элемента.
- Для важных уведомлений дублируйте информацию в полноценной системе уведомлений.
Доступность (a11y)
- Всегда передавайте смысловое содержимое в
children. - Избегайте декоративного использования без текста.
// ❌ Плохо: пустой значок
<Badge mode="prominent" />
// ✅ Хорошо: понятный контент
<Badge mode="prominent">Новые сообщения</Badge>Свойства и методы
| Свойство | Описание |
|---|---|
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: - |
getRootRef | Ref<HTMLSpanElement>По умолчанию: - |
mode | "new" | "prominent"Режим отображения компонента. По умолчанию: new |
render | ((props: AllHTMLAttributes<HTMLSpanElement> & HasRootRef<HTMLSpanElement>) => ReactNode)Позволяет переопределить рендер компонента, получая собранные свойства
(включая вычисленные Позволяет гибко объединять несколько компонентов без создания промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер. По умолчанию: - |