Implementation:OpenHands OpenHands Button

Knowledge Sources	OpenHands
Domains	UI_Components, React
Last Updated	2026-02-11 21:00 GMT

Overview

A versatile button component supporting multiple sizes, variants, and optional leading/trailing icon slots.

Description

The Button component is the primary interactive element in the OpenHands UI library. It supports two size options ("small" and "large"), multiple visual variants via ComponentVariant, and optional start and end icon slots that accept ReactElement values. The component extends native HTML button attributes, allowing standard properties like disabled, onClick, and type to be passed through. The source file is 72 lines long.

Usage

Use the Button for any clickable action in the interface, including form submissions, dialog triggers, navigation actions, and toolbar commands. Choose the appropriate variant and size to match the visual hierarchy of the context.

Code Reference

Source Location

openhands-ui/components/button/Button.tsx (72 lines)

Signature

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: "small" | "large";
  variant?: ComponentVariant;
  start?: ReactElement;
  end?: ReactElement;
}

Import

import { Button } from "@openhands/ui";

I/O Contract

Inputs (Props)

Prop	Type	Required	Default	Description
`size`	`"small" \| "large"`	No	`"large"`	Controls the button dimensions and font size.
`variant`	`ComponentVariant`	No	—	Visual style variant (e.g., primary, secondary, outlined).
`start`	`ReactElement`	No	—	Icon or element rendered before the button label.
`end`	`ReactElement`	No	—	Icon or element rendered after the button label.

Outputs

Renders an HTML <button> element styled according to the specified variant and size, with optional leading and trailing icon slots flanking the children content.

Usage Examples

import { Button } from "@openhands/ui";
import { PlusIcon, ArrowRightIcon } from "@openhands/icons";

function Toolbar() {
  return (
    <div>
      <Button variant="primary" size="large" onClick={() => console.log("clicked")}>
        Submit
      </Button>

      <Button
        variant="secondary"
        size="small"
        start={<PlusIcon />}
        end={<ArrowRightIcon />}
      >
        Add Item
      </Button>

      <Button disabled>Disabled</Button>
    </div>
  );
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment