Примеры

Размеры

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

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

По умолчанию

Используемый реквизит: не требуется — variant="default" используется по умолчанию.

Вторичный

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

Схема

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

Призрак

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

Ссылка

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

Разрушительный

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

Значок

Использованный реквизит: size="icon" на button.

со значком

Добавьте data-icon="inline-start" или data-icon="inline-end" к дочернему значку для правильного интервала.

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

Округленный

Использованный реквизит: class_name="rounded-full" на button.

Спиннер

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

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

Как ссылка

Используйте button_variants(...) для создания классов кнопок в виде простого Var, примененного к реальному rx.el.a. Не заключайте <a> внутри button(...) — базовый пользовательский интерфейс Button всегда устанавливает role="button", что переопределяет семантическую роль ссылки.

Используемые реквизиты: variant, size аргументы button_variants(...).

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

кнопка ##

button("Click me", variant="outline", size="sm")

Любая другая опора, принятая базовым пользовательским интерфейсом Button, также передается напрямую.

button_variants

Возвращает те же классы button(...), что и простой Var[str], — для стилизации элемента, не являющегося кнопкой (например, ссылки), так, чтобы он выглядел как кнопка, без обертывания его в фактический <button>.

rx.el.a(
    "Go to docs",
    href="/docs",
    class_name=button_variants("outline", "sm"),
)