An interactive control that triggers an action when pressed.
import { Button } from '@oztix/roadie-components'
A button is as wide as its label and takes its parent's alignment. Add w-full to fill the space. A parent's items-stretch or self-stretch won't widen it. To go back to the label's width at a breakpoint, use w-fit, not w-auto.
Neutral is the default intent. Each intent communicates a different purpose: accent for primary actions, danger for destructive actions, and so on. Hover and focus states adapt automatically.
Hover and focus states use the intent color scale automatically via is-interactive.
Pass href to render the button as a routed anchor. Roadie picks the right element + safety attributes based on the href shape: internal routes go through your configured RoadieLinkProvider; external hrefs (https://…, //…) auto-render with target='_blank' rel='noopener noreferrer'; protocol hrefs (mailto: / tel: / sms:) render plain anchors.
Hover each button. The browser status bar shows the resolved href exactly as Roadie rendered it. See Linking for the full reference: provider setup, the external/internal/protocol decision tree, and the external/target/rel overrides.
Add download to an href button to save the file instead of opening it, optionally under a filename. A file isn't a route, so the button renders a plain <a> and skips the provider's Link, which would otherwise prefetch the file as a page. That also means it gets no base path: if your app has one, add it to the href yourself.
For full element control, or anchor props href doesn't cover (hreflang, referrerPolicy), use Base UI's render prop. It keeps Base UI's button semantics, which are role='button' and Space activation. The element you pass is yours to make accessible. Passing both href and render triggers a one-shot dev warning. render wins, and provider routing is silently disabled.
Write labels with Interface copy.
Enter or Space activates the button. With href it is a link, so Enter follows it and Space scrolls the page. Focus is indicated by a semi-transparent ring via is-interactive.<button>, or an <a> with href. A disabled link gets aria-disabled, leaves the tab order and doesn't navigate.aria-label prop (enforced by TypeScript) since there is no visible text.Whether the button should be focusable when disabled.
Defaults to false.
CSS class applied to the element, or a function that returns a class based on the component's state.
Pass a URL to render the button as a routed anchor instead of a `<button>`. Internal hrefs route through the configured `RoadieLinkProvider` (or fall back to plain `<a>`); external hrefs (`http(s)://`, `//…`) render as `<a target='_blank' rel='noopener noreferrer'>`; `mailto:` / `tel:` / `sms:` render as plain `<a>`. Pair with `external`, `target`, or `rel` to override the defaults.
Force external-link treatment regardless of `href` shape. Useful for first-party URLs that should still open in a new tab, or for an `https://` URL that should route internally through the provider.
Override the auto `target='_blank'` default on external hrefs.
Download the `href` instead of navigating, optionally as this filename.
Inherited from NativeButtonProps
Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
Defaults to true.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.
CSS class applied to the element, or a function that returns a class based on the component's state.
Pass a URL to render the button as a routed anchor instead of a `<button>`. Internal hrefs route through the configured `RoadieLinkProvider` (or fall back to plain `<a>`); external hrefs (`http(s)://`, `//…`) render as `<a target='_blank' rel='noopener noreferrer'>`; `mailto:` / `tel:` / `sms:` render as plain `<a>`. Pair with `external`, `target`, or `rel` to override the defaults.
Force external-link treatment regardless of `href` shape. Useful for first-party URLs that should still open in a new tab, or for an `https://` URL that should route internally through the provider.
Override the auto `target='_blank'` default on external hrefs.
Download the `href` instead of navigating, optionally as this filename.
Icon-button sizing. Use `'xs' | 'sm' | 'md' | 'lg'` (plain) — the `'icon-*'` aliases are accepted for backwards compatibility but discouraged.
Defaults to md.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.
Inherited from ButtonProps
Whether the button should be focusable when disabled.
Defaults to false.
Inherited from NativeButtonProps
Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
Defaults to true.