Icon Button

Button designed specifically for usage with a single icon.

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::IconButton;
use yew::prelude::*;

#[function_component]
pub fn IconButtonExample() -> Html {
    html! {
        <IconButton>
            <MagnifyingGlassIcon width="18" height="18" />
        </IconButton>
    }
}

API Reference

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

Prop	Type	Default
`as_child`	`Option<Callback<IconButtonChildProps>>`	-
`size`	`Responsive<1..4>`	`2`
`variant`	`IconButtonVariant`	`IconButtonVariant::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_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, FlexAlign, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=3>
            <IconButton size=1 variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="15" height="15" />
            </IconButton>

            <IconButton size=2 variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>

            <IconButton size=3 variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="22" height="22" />
            </IconButton>
        </Flex>
    }
}

Variant

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

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonVariantExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton variant={IconButtonVariant::Classic}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Solid}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Surface}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Outline}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </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_icons::MagnifyingGlassIcon;
use radix_yew_themes::{IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonVariantGhostExample() -> Html {
    html! {
        <IconButton variant={IconButtonVariant::Ghost}>
            <MagnifyingGlassIcon width="18" height="18" />
        </IconButton>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{AccentColor, Flex, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonColorExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton color={AccentColor::Indigo} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton color={AccentColor::Cyan} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton color={AccentColor::Orange} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton color={AccentColor::Crimson} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </Flex>
    }
}

High-Contrast

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

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{AccentColor, Flex, FlexDirection, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex gap=3>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Classic}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Solid}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Soft}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Surface}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Outline}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
            </Flex>
            <Flex gap=3>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Classic} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Solid} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Soft} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Surface} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Outline} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
            </Flex>
        </Flex>
    }
}

Radius

Use the radius prop to assign a specific radius value.

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, IconButton, IconButtonVariant, Radius};
use yew::prelude::*;

#[function_component]
pub fn IconButtonRadiusExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton radius={Radius::None} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Small} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Medium} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Large} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Full} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </Flex>
    }
}

Loading

Use the loading prop to display a loading spinner in place of button content. The button will be disabled while loading.

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonLoadingExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton loading=true variant={IconButtonVariant::Classic}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Solid}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Surface}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Outline}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </Flex>
    }
}

Rust Radix