Button
Displays a button or a component that looks like a button.
use yew::prelude::*;
use crate::components::ui::button::Button;
#[function_component]
pub fn ButtonDemo() -> Html {
html! {
<Button>{"Button"}</Button>
}
}
use yew::prelude::*;
use crate::components::ui::button::Button;
#[function_component]
pub fn ButtonDemo() -> Html {
html! {
<Button>{"Button"}</Button>
}
}
Installation
The CLI is not yet available. For now, manually copy the component source into your project.
rust-shadcn-ui add button
Usage
use yew::prelude::*;
use crate::components::ui::button::{Button, ButtonVariant};
#[component]
fn Usage() -> impl IntoView {
view! {
<Button variant={ButtonVariant::Outline}>{"Button"}>/Button>
}
}Examples
Primary
use yew::prelude::*;
use crate::components::ui::button::Button;
#[function_component]
pub fn ButtonDemo() -> Html {
html! {
<Button>{"Button"}</Button>
}
}
use yew::prelude::*;
use crate::components::ui::button::Button;
#[function_component]
pub fn ButtonDemo() -> Html {
html! {
<Button>{"Button"}</Button>
}
}
Secondary
use yew::prelude::*;
use crate::default::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonSecondary() -> Html {
html! {
<Button variant={ButtonVariant::Secondary}>{"Secondary"}</Button>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonSecondary() -> Html {
html! {
<Button variant={ButtonVariant::Secondary}>{"Secondary"}</Button>
}
}
Destructive
use yew::prelude::*;
use crate::default::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonDestructive() -> Html {
html! {
<Button variant={ButtonVariant::Destructive}>{"Destructive"}</Button>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonDestructive() -> Html {
html! {
<Button variant={ButtonVariant::Destructive}>{"Destructive"}</Button>
}
}
Outline
use yew::prelude::*;
use crate::default::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonOutline() -> Html {
html! {
<Button variant={ButtonVariant::Outline}>{"Outline"}</Button>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonOutline() -> Html {
html! {
<Button variant={ButtonVariant::Outline}>{"Outline"}</Button>
}
}
Ghost
use yew::prelude::*;
use crate::default::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonGhost() -> Html {
html! {
<Button variant={ButtonVariant::Ghost}>{"Ghost"}</Button>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonGhost() -> Html {
html! {
<Button variant={ButtonVariant::Ghost}>{"Ghost"}</Button>
}
}
Link
use yew::prelude::*;
use crate::default::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonLink() -> Html {
html! {
<Button variant={ButtonVariant::Link}>{"Link"}</Button>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::button::{Button, ButtonVariant};
#[function_component]
pub fn ButtonLink() -> Html {
html! {
<Button variant={ButtonVariant::Link}>{"Link"}</Button>
}
}
Icon
use lucide_yew::ChevronRight;
use yew::prelude::*;
use crate::default::components::ui::button::{Button, ButtonSize, ButtonVariant};
#[function_component]
pub fn ButtonIcon() -> Html {
html! {
<Button variant={ButtonVariant::Outline} size={ButtonSize::Icon}>
<ChevronRight class="h-4 w-4" />
</Button>
}
}
use radix_yew_icons::ChevronRightIcon;
use yew::prelude::*;
use crate::new_york::components::ui::button::{Button, ButtonSize, ButtonVariant};
#[function_component]
pub fn ButtonIcon() -> Html {
html! {
<Button variant={ButtonVariant::Outline} size={ButtonSize::Icon}>
<ChevronRightIcon class="h-4 w-4" />
</Button>
}
}
With Icon
use lucide_yew::Mail;
use yew::prelude::*;
use crate::default::components::ui::button::Button;
#[function_component]
pub fn ButtonWithIcon() -> Html {
html! {
<Button>
<Mail class="mr-2 h-4 w-4" />
{"Login with Email"}
</Button>
}
}
use radix_yew_icons::EnvelopeOpenIcon;
use yew::prelude::*;
use crate::new_york::components::ui::button::Button;
#[function_component]
pub fn ButtonWithIcon() -> Html {
html! {
<Button>
<EnvelopeOpenIcon />
{"Login with Email"}
</Button>
}
}
Loading
use lucide_yew::LoaderCircle;
use yew::prelude::*;
use crate::default::components::ui::button::Button;
#[function_component]
pub fn ButtonLoading() -> Html {
html! {
<Button disabled=true>
<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
{"Please wait"}
</Button>
}
}
use radix_yew_icons::ReloadIcon;
use yew::prelude::*;
use crate::new_york::components::ui::button::Button;
#[function_component]
pub fn ButtonLoading() -> Html {
html! {
<Button disabled=true>
<ReloadIcon class="mr-2 h-4 w-4 animate-spin" />
{"Please wait"}
</Button>
}
}
As Child
use yew::prelude::*;
use crate::default::components::ui::button::{Button, ButtonChildProps};
#[function_component]
pub fn ButtonAsChild() -> Html {
html! {
<Button
as_child={Callback::from(|ButtonChildProps {class, ..}| html! {
<a class={class} href="#/login">{"Login"}</a>
})}
/>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::button::{Button, ButtonChildProps};
#[function_component]
pub fn ButtonAsChild() -> Html {
html! {
<Button
as_child={Callback::from(|ButtonChildProps {class, ..}| html! {
<a class={class} href="#/login">{"Login"}</a>
})}
/>
}
}