maud-ui64 components

Button

Form actions

Primary/secondary pairing for settings, onboarding, checkout.

Destructive

Irreversible actions — only after a confirm dialog.

Loading state

Disabled + spinner icon while awaiting a response.

Icon + text

Leading glyph for recognition at a glance.

Trailing icon + leading/trailing pair

Trailing chevrons hint at navigation; pairing both icons frames a label in a command.

Size ladder (shadcn parity)

xs / sm / default / lg — plus four icon-only sizes with required aria-label.

Usage

use maud_ui::primitives::button;

let html = button::render(button::Props {
    label: "Save changes".into(),
    variant: button::Variant::Primary,
    size: button::Size::Md,
    disabled: false,
    button_type: "submit",
});

Button

Clickable action element with variants for style (Default, Primary, Secondary, etc.) and sizes (Xs–Lg plus icon-only variants).

Import

use maud_ui::primitives::button::{self, Variant, Size, Props};

Example

use maud::html;
use maud_ui::primitives::button;

html! {
    (button::render(button::Props {
        label: "Save changes".to_string(),
        variant: button::Variant::Primary,
        size: button::Size::Md,
        disabled: false,
        button_type: "submit",
        leading_icon: None,
        trailing_icon: None,
        aria_label: None,
    }))
}

Props

FieldTypeDefaultDescription
labelString"Button"Button text content.
variantVariantDefaultVisual variant: Default, Primary, Secondary, Outline, Ghost, Danger, Link.
sizeSizeMdButton size: Xs, Sm, Md, Lg, Icon, IconXs, IconSm, IconLg.
disabledboolfalseWhether the button is disabled (aria-disabled set).
button_type&'static str"button"HTML button type attribute: "button", "submit", "reset".
leading_iconOptionNoneOptional icon markup (SVG) rendered before the label with data-icon="inline-start"; use stroke="currentColor".
trailing_iconOptionNoneOptional icon markup rendered after the label with data-icon="inline-end"; use stroke="currentColor".
aria_labelOptionNoneAccessible label; required for icon-only sizes (Icon, IconXs, IconSm, IconLg).

Variant Styles

VariantUse Case
DefaultDefault/neutral button.
PrimaryPrimary call-to-action (Save, Submit, Continue).
SecondarySecondary action (Cancel, Back, etc.).
OutlineOutlined button for emphasis without primary color.
GhostMinimal ghost style, usually for low-priority actions.
DangerDestructive actions (Delete, Revoke); use with AlertDialog.
LinkStyled as a text link.

Size Ladder

SizeClassNotes
Xsmui-btn--xsExtra-small text button.
Smmui-btn--smSmall text button.
Mdmui-btn--mdDefault text button.
Lgmui-btn--lgLarge text button.
Iconmui-btn--iconIcon-only button (requires aria_label).
IconXsmui-btn--icon-xsExtra-small icon-only (requires aria_label).
IconSmmui-btn--icon-smSmall icon-only (requires aria_label).
IconLgmui-btn--icon-lgLarge icon-only (requires aria_label).

Accessibility

  • Icon-only buttons (Size::Icon*) must have aria_label set; enforced by debug_assert! at render time in debug builds.
  • Icons use stroke="currentColor" to inherit button text color (emoji characters do NOT inherit and render in OS colors).
  • Icons marked aria-hidden="true" to prevent double announcement.
  • Disabled buttons set aria-disabled="true" (not HTML disabled attribute for better style control).

Related

ButtonGroup, AlertDialog, Link.

Shadcn reference

https://ui.shadcn.com/docs/components/base/button

← Back to Gallery