Button

Trigger an action or event, such as submitting a form or displaying a dialog.

use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::Button;
use yew::prelude::*;

#[function_component]
pub fn ButtonExample() -> Html {
    html! {
        <Button>
            <BookmarkIcon /> {"Bookmark"}
        </Button>
    }
}

API Reference

This component is based on the button element and supports common margin props.

Prop	Type	Default
`as_child`	`Option<Callback<ButtonChildProps>>`	-
`size`	`Responsive<1..4>`	`2`
`variant`	`ButtonVariant`	`ButtonVariant::Solid`
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-
`radius`	`Option<Radius>`	-
`loading`	`bool`	`false`

Examples

Size

Use the size prop to control the size of the button.

use radix_yew_themes::{Button, ButtonVariant, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn ButtonSizeExample() -> Html {
    html! {
        <Flex gap=3 align={FlexAlign::Center}>
            <Button size=1 variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button size=2 variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button size=3 variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
        </Flex>
    }
}

Variant

Use the variant prop to control the visual style of the button.

use radix_yew_themes::{Button, ButtonVariant, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn ButtonVariantExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=3>
            <Button variant={ButtonVariant::Classic}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Solid}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Soft}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Surface}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Outline}>{"Edit profile"}</Button>
        </Flex>
    }
}

Use the ghost variant to display a button without chrome. Ghost buttons behave like text in layout, as they use a negative margin to optically align themselves against their siblings while maintaining the padding in active and hover states.

use radix_yew_themes::{Button, ButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn ButtonVariantGhostExample() -> Html {
    html! {
        <Button variant={ButtonVariant::Ghost}>{"Edit profile"}</Button>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_themes::{AccentColor, Button, ButtonVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn ButtonColorExample() -> Html {
    html! {
        <Flex gap=3>
            <Button color={AccentColor::Indigo} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button color={AccentColor::Cyan} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button color={AccentColor::Orange} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button color={AccentColor::Crimson} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
        </Flex>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast with the background.

use radix_yew_themes::{AccentColor, Button, ButtonVariant, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn ButtonHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex gap=3>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Classic}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Solid}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Soft}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Surface}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Outline}>
                    {"Edit profile"}
                </Button>
            </Flex>
            <Flex gap=3>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Classic} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Solid} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Soft} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Surface} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Outline} high_contrast=true>
                    {"Edit profile"}
                </Button>
            </Flex>
        </Flex>
    }
}

Radius

Use the radius prop to assign a specific radius value.

use radix_yew_themes::{Button, ButtonVariant, Flex, Radius};
use yew::prelude::*;

#[function_component]
pub fn ButtonRadiusExample() -> Html {
    html! {
        <Flex gap=3>
            <Button radius={Radius::None} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Small} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Medium} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Large} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Full} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
        </Flex>
    }
}

With Icons

You can nest icons directly inside the button. An appropriate gap is provided automatically.

use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::{Button, ButtonVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn ButtonWithIconsExample() -> Html {
    html! {
        <Flex gap=3>
            <Button variant={ButtonVariant::Classic}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Solid}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Soft}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Surface}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Outline}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
        </Flex>
    }
}

Loading

Use the loading prop to display a loading spinner in place of button content, preserving the original size of the button in its normal state. The button will be disabled while loading.

use radix_yew_themes::{Button, ButtonVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn ButtonLoadingExample() -> Html {
    html! {
        <Flex gap=3>
            <Button loading=true variant={ButtonVariant::Classic}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Solid}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Soft}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Surface}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Outline}>
                {"Bookmark"}
            </Button>
        </Flex>
    }
}

If you have an icon inside the button, you can use the button's disabled state and wrap the icon in a standalone Spinner to achieve a more sophisticated design.

use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::{Button, ButtonVariant, Flex, Spinner};
use yew::prelude::*;

#[function_component]
pub fn ButtonLoadingSpinnerExample() -> Html {
    html! {
        <Flex gap=3>
            <Button disabled=true variant={ButtonVariant::Classic}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Solid}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Soft}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Surface}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Outline}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
        </Flex>
    }
}

Rust Radix