Struct ButtonProps 

pub struct ButtonProps {

    pub color: Color,
    pub outline: bool,
    pub link: bool,
    pub plain: bool,
    pub size: Size,
    pub disabled: bool,
    pub href: Option<String>,
    pub target: Option<String>,
    pub rel: Option<String>,
    pub role: Option<String>,
    pub download: Option<String>,
    pub type: String,
    pub onclick: Option<EventHandler<MouseEvent>>,
    pub onmousedown: Option<EventHandler<MouseEvent>>,
    pub active: bool,
    pub class: String,
    pub children: Element,
    /* private fields */
}

Bootstrap Button component.

Renders a <button> by default. When href is set, renders an <a> element instead (Bootstrap link-button pattern).

Accepts all standard HTML attributes via extends = GlobalAttributes. This means title, data-bs-toggle, aria-label, id, etc. all work.

Bootstrap HTML → Dioxus

HTML	Dioxus
<button class="btn btn-primary">	Button { color: Color::Primary, "Text" }
<button class="btn btn-outline-danger btn-sm">	Button { color: Color::Danger, outline: true, size: Size::Sm, "Text" }
<button class="btn btn-link btn-sm">	Button { link: true, size: Size::Sm, "Text" }
<button class="btn btn-sm"> (neutral, no color variant)	Button { plain: true, size: Size::Sm, "Text" }
<button class="btn btn-success btn-lg" disabled>	Button { color: Color::Success, size: Size::Lg, disabled: true, "Text" }
<a class="btn btn-primary" href="/page">	Button { color: Color::Primary, href: "/page", "Link" }
<a class="btn btn-sm" href="f.json" target="_blank" download="f.json">	Button { size: Size::Sm, href: "f.json", target: "_blank", download: "f.json", "DL" }
<button class="btn btn-primary" title="Tip">	Button { color: Color::Primary, title: "Tip", "Text" }

rsx! {
    Button { color: Color::Primary, "Click me" }
    Button { color: Color::Danger, outline: true, size: Size::Sm, "Delete" }
    Button { color: Color::Success, disabled: true, "Saved" }
    Button { color: Color::Warning, onclick: move |_| { /* handler */ }, "Action" }
    // Link button — renders <a> instead of <button>:
    Button { color: Color::Primary, href: "/page", "Go to Page" }
    // HTML attributes work directly:
    Button { color: Color::Secondary, title: "Tooltip text", "Hover me" }
    Button { color: Color::Primary, "data-bs-toggle": "modal", "Open Modal" }
}

Fields

color: Color

Button color variant.

outline: bool

Use outline style instead of filled.

link: bool

Use Bootstrap link-button style (btn-link).

plain: bool

Render a neutral button with no color variant: bare .btn (Bootstrap’s base button already renders neutral — body-colored text, transparent background and border, with the standard focus ring and pointer cursor). Pair with utility classes (border-0, p-0, …) for ghost / borderless / text-button styles. Takes precedence over outline; ignored when link is set.

size: Size

Button size.

disabled: bool

Whether the button is disabled.

href: Option<String>

When set, renders an <a> element instead of <button> (link-button pattern).

target: Option<String>

Link target (e.g., "_blank"). Only used when href is set.

rel: Option<String>

Link relationship (e.g., "noopener noreferrer"). Only used when href is set — and the pairing that makes target: "_blank" safe, so the two belong together.

role: Option<String>

ARIA role. Overrides the role="button" a link-button renders by default; unset on a real <button>, which needs none.

This has to be a prop rather than something the caller passes through attributes: the spread is appended, not merged, so a role supplied that way emits role="button" role="link" — and HTML keeps the first duplicate, so the override is silently discarded while looking exactly like it worked.

download: Option<String>

Download filename. Only used when href is set.

type: String

HTML button type attribute (ignored when href is set).

onclick: Option<EventHandler<MouseEvent>>

Click event handler.

onmousedown: Option<EventHandler<MouseEvent>>

Mouse-down handler. A toolbar button needs it to prevent_default and keep the caret in the field it acts on. GlobalAttributes carries attributes, not listeners, so this cannot ride along in attributes.

active: bool

Active (pressed) state.

class: String

Additional CSS classes.

children: Element

Child elements.

Implementations

impl ButtonProps

pub fn builder() -> ButtonPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building ButtonProps. On the builder, call .color(...)(optional), .outline(...)(optional), .link(...)(optional), .plain(...)(optional), .size(...)(optional), .disabled(...)(optional), .href(...)(optional), .target(...)(optional), .rel(...)(optional), .role(...)(optional), .download(...)(optional), .r#type(...)(optional), .onclick(...)(optional), .onmousedown(...)(optional), .active(...)(optional), .class(...)(optional), .attributes(...)(optional), .children(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of ButtonProps.

Trait Implementations

impl Clone for ButtonProps

fn clone(&self) -> ButtonProps

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl PartialEq for ButtonProps

fn eq(&self, other: &ButtonProps) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl Properties for ButtonProps

where Self: Clone,

type Builder = ButtonPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

The type of the builder for this component. Used to create “in-progress” versions of the props.

fn builder() -> Self::Builder

Create a builder for this component.

fn memoize(&mut self, new: &Self) -> bool

Make the old props equal to the new props. Return if the props were equal and should be memoized.

fn into_vcomponent<M>( self, render_fn: impl ComponentFunction<Self, M>, ) -> VComponent

where M: 'static,

Create a component from the props.

impl StructuralPartialEq for ButtonProps