Перейти до вмісту
Starlight
Filters

    Badges

    Цей контент ще не доступний вашою мовою.

    To display small pieces of information, such as a status or category, use the <Badge> component.

    Preview
    New

    Import

    Section titled “Import”
    import { Badge } from '@astrojs/starlight/components';

    Usage

    Section titled “Usage”

    Display a badge using the <Badge> component and pass the content you want to display to the text attribute of the <Badge> component.

    By default, the badge will use the theme accent color of your site. To use a built-in badge color, set the variant attribute to one of the supported values.

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

    - <Badge text="Note" variant="note" />
    - <Badge text="Success" variant="success" />
    - <Badge text="Tip" variant="tip" />
    - <Badge text="Caution" variant="caution" />
    - <Badge text="Danger" variant="danger" />
    Preview
    • Note
    • Success
    • Tip
    • Caution
    • Danger

    Use different sizes

    Section titled “Use different sizes”

    Use the size attribute to control the size of the badge text.

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

    - <Badge text="New" size="small" />
    - <Badge text="New and improved" size="medium" />
    - <Badge text="New, improved, and bigger" size="large" />
    Preview
    • New
    • New and improved
    • New, improved, and bigger

    Customize badges

    Section titled “Customize badges”

    Customize badges by using any other <span> attributes such as class or style with custom CSS.

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

    <Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />
    Preview
    Custom

    <Badge> Props

    Section titled “<Badge> Props”

    Implementation: Badge.astro

    The <Badge> component accepts the following props and also any other <span> attributes:

    text

    Section titled “text”

    required
    type: string

    The text content to display in the badge.

    variant

    Section titled “variant”

    type: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
    default: 'default'

    The badge color variant to use: note (blue), tip (purple), danger (red), caution (orange), success (green), or default (theme accent color).

    size

    Section titled “size”

    type: 'small' | 'medium' | 'large'

    Defines the size of the badge to display.