Inputs

Button

A pressable control for actions, with consistent visual variants and states.

ButtonView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Cell } from "retend";

import { Button } from "innate-ui";
import { Icon } from "@/docs/icons/Icon";
import classes from "../docs.module.css";

function PlusIcon() {
  return <Icon name="plus" />;
}

export function ButtonDemo() {
  const created = Cell.source(false);
  const label = Cell.derived(() => (created.get() ? "Create another project" : "Create project"));

  const createProject = () => created.set(true);

  return (
    <div class={classes.buttonStack}>
      <Button onClick={createProject}>
        <Button.Start>
          <PlusIcon />
        </Button.Start>
        {label}
      </Button>
      <Button variant="primary" onClick={createProject}>
        <Button.Start>
          <PlusIcon />
        </Button.Start>
        {label}
      </Button>
      <Button loading>Creating project</Button>
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

ButtonProps

Prop	Type	Default
`children` Button label or content.	`JSX.Children`	`—`
`variant` Visual treatment of the button.	`JSX.ValueOrCell<ButtonVariant>`	`"secondary"`
`size` Button size.	`JSX.ValueOrCell<ButtonSize>`	`"medium"`
`disabled` Whether the button is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`loading` Shows the loading state and disables interaction.	`JSX.ValueOrCell<boolean>`	`false`
`onClick` Click handler.	`EventHandlerProp<HTMLButtonElement, MouseEvent>`	`—`
`onPointerEnter` Pointer-enter handler.	`EventHandlerProp<HTMLButtonElement, PointerEvent>`	`—`
`onPointerLeave` Pointer-leave handler.	`EventHandlerProp<HTMLButtonElement, PointerEvent>`	`—`
`onPointerMove` Pointer-move handler.	`EventHandlerProp<HTMLButtonElement, PointerEvent>`	`—`
`onFocus` Focus handler.	`EventHandlerProp<HTMLButtonElement, FocusEvent>`	`—`
`onBlur` Blur handler.	`EventHandlerProp<HTMLButtonElement, FocusEvent>`	`—`
`onKeyDown` Key-down handler.	`EventHandlerProp<HTMLButtonElement, KeyboardEvent>`	`—`

Inspect the typed source →