Значок

Отображает значок или компонент, похожий на значок.

❯buridan add значок

Error: Reference Target 'значок' not found

Примеры

Варианты

Используйте параметр variant, чтобы изменить стиль значка.

Использованный реквизит: variant на badge.

Error: Reference Target 'значок_с_вариантами' not found

С иконками

Отобразите значок внутри значка. Добавьте data-icon="inline-start" или data-icon="inline-end" к значку, чтобы расположить его правильно (отступы регулируются автоматически).

Использованный реквизит: data_icon на дочернем значке.

Error: Reference Target 'значок_с_значком' not found

Со спиннером

Отобразите spinner внутри значка — то же соглашение о расположении data-icon, что и для значков.

Использованный реквизит: data_icon на дочернем элементе-спиннере.

DeletingGenerating

import reflex as rx

from components.ui.badge import badge
from components.ui.spinner import spinner


def badge_with_spinner() -> rx.Component:
    return rx.el.div(
        badge(
            spinner(custom_attrs={"data-icon": "inline-start"}),
            "Deleting",
            variant="destructive",
        ),
        badge(
            "Generating",
            spinner(custom_attrs={"data-icon": "inline-end"}),
            variant="secondary",
        ),
        class_name="flex flex-wrap gap-2",
    )

Ссылка

Передайте rx.el.a в качестве дочернего элемента значка, чтобы превратить его в ссылку. badge принимает *children, поэтому работает любой интерактивный элемент.

Использованный реквизит: не требуется — передайте rx.el.a(...) как дочерний.

Error: Reference Target 'значок_как_ссылка' not found

Пользовательские цвета

Переопределите цвета, передав дополнительные классы через class_name.

Использованный реквизит: class_name на badge.

BlueGreenSkyPurpleRed

import reflex as rx

from components.ui.badge import badge


def badge_custom_colors() -> rx.Component:
    return rx.el.div(
        badge(
            "Blue",
            class_name="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
        ),
        badge(
            "Green",
            class_name="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300",
        ),
        badge(
            "Sky",
            class_name="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300",
        ),
        badge(
            "Purple",
            class_name="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300",
        ),
        badge(
            "Red",
            class_name="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300",
        ),
        class_name="flex flex-wrap gap-2",
    )

Справочник по API

значок

badge("New", variant="secondary")

Опора	Тип	По умолчанию
`variant`	`Literal["default", "secondary", "destructive", "outline", "ghost", "link"]`	`"default"`
`class_name`	`str`	`""`

Любой другой реквизит, принятый нативным <span>, также передается напрямую.

External Tools

︲

On This Page