Developer Experience (DX)

Next, let's look at how developers use the Button. It has one API, with the same names as every other component, and it's typed end to end.

import { Button } from "@/components/Button";

export function Settings() {
  return (
    <Button color="primary" onClick={save}>
      Save changes
    </Button>
  );
}

Consistent

Once you've learned the Button's API, you already know most of every other component's. These names mean the same thing everywhere in Open Components:

We recommend variant="solid", color="neutral" and size="md" as the defaults, while type always defaults to "button". We chose neutral so that a primary button is always a conscious decision, made once per view.

Type-safe

Props, events and slots are typed, so your editor can autocomplete them and your type checker (tsc, vue-tsc, svelte-check, ngc or astro check) catches mistakes like variant="primary".

We also export ButtonProps, which comes in handy for wrappers and data-driven UIs:

import type { ButtonProps } from "@/components/Button";

const actions: (ButtonProps & { id: string })[] = [
  { id: "cancel", label: "Cancel", variant: "ghost" },
  { id: "publish", label: "Publish", color: "primary" },
];

Composable

The root element is the <button> (or the <a>) itself, so everything you pass lands directly on it. That includes classes, styles, id, ARIA attributes, event listeners and native attributes like name, value, form and popovertarget. A ref to the Button reaches that same element, so there's no wrapper to reach through.

<Button type="submit" name="intent" value="publish" color="primary">Publish</Button>
<Button popoverTarget="filters" variant="outline">Filters</Button>

Links and routers

Passing an href renders an <a>. For links that go through your router, give the Button the link's href and your router's click handler, which leaves modified clicks, like Ctrl-click to open a new tab, to the browser. Routers that handle every link on the page only need the href:

import { useHref, useLinkClickHandler } from "react-router";

export function SettingsLink() {
  const href = useHref("/settings");
  const navigate = useLinkClickHandler("/settings");

  return (
    <Button href={href} onClick={navigate}>
      Settings
    </Button>
  );
}

Since the Button doesn't know anything about your router, it works with any of them.

With other components

• Tooltips on icon-only buttons repeat the button's label. The hidden label is what names the button, and the tooltip simply shows that name.
• Menus and popovers set aria-haspopup, aria-expanded and aria-controls on the Button, which passes them straight through.
• The loading spinner is a Spinner. The Spinner draws itself, while the Button places it over the content, sizes it with --button--icon--size and announces loadingLabel, since the Spinner stays hidden from screen readers.
• A group of buttons is simply a flex container with a gap. A toolbar, where the arrow keys move between buttons, is a separate pattern.

Controllable

The Button doesn't keep any state of its own. Every state is a prop or an attribute that you control, so all of them are always within reach:

DX Checklist

FAQ