Button

Buttons trigger actions. Three variants and three sizes, all with hover and active states.

When to use

• A Default button for the primary action on a page.
• An Outline button for secondary actions that still need a visible boundary.
• A Ghost button for low-emphasis actions in dense toolbars.

Sizes

Size	Padding	Text
Small	px_3 py_1p5 (12×6px)	text_sm
Medium	px_4 py_2 (16×8px)	text_base
Large	px_5 py_2p5 (20×10px)	text_lg

API

Button::new(label)

Creates a button. The element id defaults to the label.

Method	Type	Default	Description
.variant(variant)	ButtonVariant	Default	Visual style
.size(size)	ButtonSize	Medium	Size
.id(id)	impl Into<SharedString>	label	Element id — override when two buttons share a label (GPUI requires unique ids)
.on_click(fn)	Fn(&ClickEvent, &mut Window, &mut App)	—	Click handler

ButtonVariant

Variant	Style
Default	bg ZINC_900, white text; hover ZINC_800, active ZINC_700
Outline	1px ZINC_300 border, ZINC_900 text; hover ZINC_100, active ZINC_200
Ghost	ZINC_900 text; hover ZINC_100, active ZINC_200

ButtonSize

Small · Medium · Large

Usage

use gpui::{Component, div, prelude::*};
use components::{Button, ButtonSize, ButtonVariant};

div()
    .child(Component::new(
        Button::new("Save")
            .variant(ButtonVariant::Default)
            .size(ButtonSize::Large)
            .on_click(cx.listener(|this, _, _, cx| {
                // save
                cx.notify();
            })),
    ))

Copy the source

crates/components/src/button.rs — self-contained, stateless, and free to modify.