Перейти к содержимому
Starlight

Значки

Для отображения небольших фрагментов информации, таких как статус или категория, используйте компонент <Badge>.

Превью
Новинка

Импорт

import { Badge } from '@astrojs/starlight/components';

Использование

Отображайте значки с помощью компонента <Badge>, с передачей желаемого содержимого через атрибут text.

По умолчанию значок будет использовать акцентный цвет темы вашего сайта. Чтобы использовать встроенный цвет значка, установите для атрибута variant одно из поддерживаемых значений.

import { Badge } from '@astrojs/starlight/components';


- <Badge text="Примечание" variant="note" />
- <Badge text="Успешно" variant="success" />
- <Badge text="Совет" variant="tip" />
- <Badge text="Внимание" variant="caution" />
- <Badge text="Опасность" variant="danger" />
Превью
  • Примечание
  • Успешно
  • Совет
  • Внимание
  • Опасность

Использование разных размеров

Используйте атрибут size для управления размером текста значка.

import { Badge } from '@astrojs/starlight/components';


- <Badge text="Новинки" size="small" />
- <Badge text="Новинки и улучшения" size="medium" />
- <Badge text="Новинки, улучшения и другое" size="large" />
Превью
  • Новинки
  • Новинки и улучшения
  • Новинки, улучшения и другое

Настройка значков

Настраивайте значки, используя другие атрибуты <span>, такие как class или style, с помощью пользовательского CSS.

import { Badge } from '@astrojs/starlight/components';


<Badge text="Свой текст" variant="success" style={{ fontStyle: 'italic' }} />
Превью
Свой текст

Параметры <Badge>

Реализация: Badge.astro

Компонент <Badge> принимает следующие параметры, а также любые другие атрибуты <span>:

text

обязательный
тип: string

Текстовое содержимое для отображения в значке.

variant

тип: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
по умолчанию: 'default'

Вариант цвета значка для использования: note (синий), tip (фиолетовый), danger (красный), caution (оранжевый), success (зелёный) или default (акцентный цвет темы).

size

тип: 'small' | 'medium' | 'large'

Определяет размер отображаемого значка.