Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · button

Native buttons

Opt-in styles for native button and link actions.

Install with npx @madojs/ui@latest add button.

Primitive

Native actions

An anchor keeps navigation semantics: explore native form controls.

Composition

  • Apply mado-ui-button to a native button for actions or to an anchor with href for navigation. Keep the native element responsible for behavior.

Public API

class mado-ui-button
Shared visual contract for native buttons and navigational anchors.
class mado-ui-link
Inline navigational-link treatment.
attribute data-variant
Optional secondary, ghost or danger appearance.
attribute data-size
Optional small or large size.
attribute data-block
Makes the visual button fill its containing inline size.

Detected public classes

  • .mado-ui-button
  • .mado-ui-link

Detected public CSS properties

  • --mado-ui-button-background
  • --mado-ui-button-border
  • --mado-ui-button-color
  • --mado-ui-button-focus-ring
  • --mado-ui-button-font-size
  • --mado-ui-button-font-weight
  • --mado-ui-button-gap
  • --mado-ui-button-height
  • --mado-ui-button-hover-background
  • --mado-ui-button-hover-border
  • --mado-ui-button-padding
  • --mado-ui-button-radius
  • --mado-ui-button-shadow
  • --mado-ui-color-action
  • --mado-ui-color-action-contrast
  • --mado-ui-color-action-hover
  • --mado-ui-color-border
  • --mado-ui-color-danger
  • --mado-ui-color-danger-contrast
  • --mado-ui-color-danger-hover
  • --mado-ui-color-surface
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-focus-ring
  • --mado-ui-link-color
  • --mado-ui-link-font-weight
  • --mado-ui-link-hover-color
  • --mado-ui-radius-sm
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-5

Accessibility contract

  • Use button with an explicit type for actions and anchor with href for navigation.
  • Only native disabled buttons are behaviorally disabled; aria-disabled on an anchor does not stop activation.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.