Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Separator

Visually or semantically separates content.

use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation, Text};
use yew::prelude::*;

#[function_component]
pub fn SeparatorExample() -> Html {
    html! {
        <Text size=2>
            {"Tools for building high-quality, accessible UI."}
            <Separator my=3 size=4 />
            <Flex gap=3 align={FlexAlign::Center}>
                {"Themes"}
                <Separator orientation={SeparatorOrientation::Vertical} />
                {"Primitives"}
                <Separator orientation={SeparatorOrientation::Vertical} />
                {"Icons"}
                <Separator orientation={SeparatorOrientation::Vertical} />
                {"Colors"}
            </Flex>
        </Text>
    }
}

API Reference

This component inherits props from the Separator primitive and supports common margin props.

PropTypeDefault
orientationSeparatorOrientationSeparatorOrientationHorizontal
sizeResponsive<1..4>1
colorAccentColorAccentColor::Gray
decorativebooltrue

Examples

Size

Use the size prop to control the size of the separator. The largest step takes full width or height of the container.

use radix_yew_themes::{Flex, FlexDirection, Separator, SeparatorOrientation};
use yew::prelude::*;

#[function_component]
pub fn SeparatorSizeHorizontalExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=4>
            <Separator orientation={SeparatorOrientation::Horizontal} size=1 />
            <Separator orientation={SeparatorOrientation::Horizontal} size=2 />
            <Separator orientation={SeparatorOrientation::Horizontal} size=3 />
            <Separator orientation={SeparatorOrientation::Horizontal} size=4 />
        </Flex>
    }
}


use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation};
use yew::prelude::*;

#[function_component]
pub fn SeparatorSizeVerticalExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4 height="96px">
            <Separator orientation={SeparatorOrientation::Vertical} size=1 />
            <Separator orientation={SeparatorOrientation::Vertical} size=2 />
            <Separator orientation={SeparatorOrientation::Vertical} size=3 />
            <Separator orientation={SeparatorOrientation::Vertical} size=4 />
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

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

#[function_component]
pub fn SeparatorColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Separator color={AccentColor::Indigo} size=4 />
            <Separator color={AccentColor::Cyan} size=4 />
            <Separator color={AccentColor::Orange} size=4 />
            <Separator color={AccentColor::Crimson} size=4 />
        </Flex>
    }
}

Orientation

Use the orientation prop to control whether the separator is horizontal or vertical.

use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation};
use yew::prelude::*;

#[function_component]
pub fn SeparatorOrientationExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Separator orientation={SeparatorOrientation::Horizontal} />
            <Separator orientation={SeparatorOrientation::Vertical} />
        </Flex>
    }
}

See Also