Prepared Docs

Button from @prepared911/ui-core renders a native <button> by default and a proper <a> when href is supplied. The element semantics do the heavy lifting; your job is to name the button clearly, pick the right element for the interaction, and keep disabled state honest.

What the component handles

Native element semantics. <button> for actions, <a> for navigation.
Keyboard activation. Enter and Space activate buttons; Enter activates links.
Focus indicators. Visible focus rings meet WCAG contrast on both themes.
Disabled state. Applies the native disabled attribute, removing the element from the tab order.

What you must provide

Clear label. Visible text describes the outcome ("Create incident", not "Submit").
External-link signaling. When external is set, supplement the label with "(opens in new window)" via aria-label so screen-reader users hear the behavior.
Accessible name on icon-first buttons. If the label is an icon, reach for IconButton; don't leave a Button unnamed.
State on toggles. Non-exclusive toggles expose aria-pressed; disclosure triggers expose aria-expanded with aria-controls.

Links vs. buttons

Button becomes a link when href is provided. Never use a <button> to navigate or an <a> to run an action—semantics drive assistive-tech behavior.

Keyboard behavior

Tab / Shift+Tab move focus.
Enter / Space activate buttons; Enter activates links.
Disabled buttons are skipped.

Semantics and roles

<button> with type="button" (or type="submit" on submit buttons).
<a> with href for navigation; add rel="noopener noreferrer" for external links opened in a new window.
aria-pressed on non-exclusive toggle buttons; aria-expanded + aria-controls on disclosure triggers.

Disabled state

Prefer the native disabled attribute; it removes the button from the tab order and announces as "dimmed / disabled". Use aria-disabled="true" only when the control must remain focusable for a future tooltip-driven explanation.

Known caveats

Link-styled buttons. A link that performs an action (or a button that navigates) will mislead keyboard and screen-reader users. Match semantics to behavior.
Generic labels. "Delete" in a row context is ambiguous. Pair with aria-label that names the target ("Delete incident ABC-123") when the row isn't part of the accessible name.

Button / API and Development

Button Group / Usage

What the component handles

What you must provide

What the component handles

Native element semantics. <button> for actions, <a> for navigation.
Keyboard activation. Enter and Space activate buttons; Enter activates links.
Focus indicators. Visible focus rings meet WCAG contrast on both themes.
Disabled state. Applies the native disabled attribute, removing the element from the tab order.

What you must provide

Clear label. Visible text describes the outcome ("Create incident", not "Submit").
External-link signaling. When external is set, supplement the label with "(opens in new window)" via aria-label so screen-reader users hear the behavior.
Accessible name on icon-first buttons. If the label is an icon, reach for IconButton; don't leave a Button unnamed.
State on toggles. Non-exclusive toggles expose aria-pressed; disclosure triggers expose aria-expanded with aria-controls.

Links vs. buttons

Button becomes a link when href is provided. Never use a <button> to navigate or an <a> to run an action—semantics drive assistive-tech behavior.

Keyboard behavior

Tab / Shift+Tab move focus.
Enter / Space activate buttons; Enter activates links.
Disabled buttons are skipped.

Semantics and roles

<button> with type="button" (or type="submit" on submit buttons).
<a> with href for navigation; add rel="noopener noreferrer" for external links opened in a new window.
aria-pressed on non-exclusive toggle buttons; aria-expanded + aria-controls on disclosure triggers.

Disabled state

Known caveats

Link-styled buttons. A link that performs an action (or a button that navigates) will mislead keyboard and screen-reader users. Match semantics to behavior.
Generic labels. "Delete" in a row context is ambiguous. Pair with aria-label that names the target ("Delete incident ABC-123") when the row isn't part of the accessible name.

Button / API and Development

Button Group / Usage

What the component handles

What you must provide