Kbd
Represents keyboard input or a hotkey.
use radix_yew_themes::Kbd;
use yew::prelude::*;
#[function_component]
pub fn KbdExample() -> Html {
html! {
<Kbd>{"Shift + Tab"}</Kbd>
}
}
API Reference
This component is based on the kbd element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
as_child | Option<Callback<KbdChildProps>> | - |
size | Option<Responsive<1..9>> | - |
Examples
Size
Use the size prop to control text size.
use radix_yew_themes::{Flex, FlexAlign, FlexDirection, Kbd};
use yew::prelude::*;
#[function_component]
pub fn KbdSizeExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=3>
<Kbd size=1>{"Shift + Tab"}</Kbd>
<Kbd size=2>{"Shift + Tab"}</Kbd>
<Kbd size=3>{"Shift + Tab"}</Kbd>
<Kbd size=4>{"Shift + Tab"}</Kbd>
<Kbd size=5>{"Shift + Tab"}</Kbd>
<Kbd size=6>{"Shift + Tab"}</Kbd>
<Kbd size=7>{"Shift + Tab"}</Kbd>
<Kbd size=8>{"Shift + Tab"}</Kbd>
<Kbd size=9>{"Shift + Tab"}</Kbd>
</Flex>
}
}