Button

A button starts an action. Its color says what kind of action it is: pink for the one action a screen exists for, an ink border for the rest, no frame for cancel and minor actions, orange for what interrupts and red for what cannot be undone. An icon-only button is the same component at an icon size.

跟随页面浅色深色并排

When to use

Variants

accent renders the same as primary, and outline, information, muted and success the same as default. Use the names in the table.

跟随页面浅色深色并排

On the frame, a button takes the frame's ink (foreground-on-frame) and lays fill-frame-medium over itself on hover, on press and while its popup is open. The text and icon sizes become the 36px frame item.

Which color

Emphasis is relative to the surface that holds the button, not a property of the action. A frameless Cancel reads as a control inside a dialog and as a line of text on a page; the action did not change, what encloses it did. The test is whether the surface draws its own edge and takes focus while it is open — a dialog, a sheet, a menu, a popover, a toolbar, a card, a panel header all do; a page and a section of a page do not. When a surface is not on that list, apply the test rather than guessing: if the button would be the only thing marking where it sits, give it a border.

Every button is flat: the ink border or the sticker marks it as a control, never a shadow (Elevation). Colored buttons carry ink type (Color).

• Make the primary action pink. Use at most one pink button per screen; a screen may have none. Unread counts and attention dots don't count toward the one.
• When a screen has a second primary action, make it default.
• Give every other action an ink border (default).
• Make cancel and minor actions frameless (ghost) inside a surface that draws its own edge. On a page, give the same action an ink border (default).
• Use TextLink for the bottom of the ladder: where even a frameless button is too much weight, such as Forgot Password on a sign-in page or a See All beside a section title. It may carry an action, but it is the quietest control on the screen, never a way to fit one more button into a crowded row. It is not a Button variant: a text link is a word in a line, not a box, so it takes the size of the text around it, and a Button would bring a height, a border and padding that each have to be taken off again.
• Use orange (warning) for actions that interrupt but can be undone: stop, leave, reset.
• Use red (danger) only for actions that cannot be undone, and only in a confirmation dialog (AlertDialog). Don't color a destructive item in a menu (DropdownMenu).
• Don't use danger-secondary or danger-outline: red text on an outline button puts red outside a confirmation dialog.
• Never make a button yellow: yellow means "you" (Color).

Sizes

Size follows the purpose. The same purpose has the same size everywhere, and there are no other sizes. lg, icon-lg and xl take the control height (Spacing): a finger's size on a phone and a touch screen, and Feishu's PC sizes on a desktop (from 768px with a mouse or trackpad). On a desktop lg is as tall as md, with its wider padding and its text-subhead label. Still pick lg by purpose, as the table says: the same code runs on a phone, where lg is the finger-sized button the purpose needs, and on a desktop it costs nothing in height.

These three and the two icon sizes, icon-md and icon-lg, are all the sizes. xs and sm render exactly as md, and icon-xs and icon-sm exactly as icon-md. They are deprecated aliases, kept until raft-ui 1.0. node node_modules/@botiverse/raft-ui/codemods/button-sizes.mjs <src> renames them, and nothing on screen changes.

When a place looks too tight for a 32px button, change the container, not the button. A banner with a button is a standard banner, not sm.

Size by place

Every place has one answer. Where a part of the container sets the place, follow it: the size comes with the place, not with the button.

Inside a floating toolbar

A toolbar that floats over content shows on every message under the pointer, so it is more compact than the page. The message hover toolbar and the text-selection toolbar are 36px high, with 28px buttons 4px from the frame and 4px apart, at radius-chip. The container sizes them: MessageItemToolbarButton and MessageTextSelectionToolbarButton are the toolbars' own parts, and MessageMultiSelectToolbarActions brings a md Button in it to 28px (MessageItem). The only other 28px button is SidebarSectionControl on a sidebar section's 16px header line. 28px is not a Button size, so don't make a Button 28px yourself.

Icon buttons

• Make an icon button next to an input (copy a link, remove a row) the input's height: size="icon-lg", which follows the field's height on a phone and on a desktop.
• Put several icon buttons in a panel header inside PanelActions (Panel), which aligns them to the end and spaces them.
• Mark a bell that has something new with an attention dot on its top-right corner.
• Count the send button as the screen's pink button.

Icon sizes by context are in Iconography.

States

Hover, press, focus and disabled follow States: every button hovers and presses with the medium tier (Hover and press): a sticker lays sticker-medium over itself, a paper-colored button fill-medium.

• Disabled, frameless: a frameless icon button (ghost at an icon size) and an on-frame button only turn their icon and text foreground-disabled. No fill or border appears.
• Disabled, colored: a disabled pink, orange or red button is no longer a sticker: it takes the shared disabled look.
• Loading: loading shows the pixel spinner (Spinner) and keeps the button's width and color. Use it for any wait a button started (Choosing a component).

Content

• Start with a verb and name the result: Send for Review, not OK or Submit. In a dialog the title names the object, so its main button says the verb alone: Create in Create Channel (Writing).
• Use Title Case (Writing), and repeat the button's words in the dialog it opens (Writing).
• Put an icon before the label (data-icon="inline-start"), and Return or an arrow after it (data-icon="inline-end").
• While loading, say what is happening: Creating….

Accessibility

Button wraps Base UI Button and renders a native <button>. For navigation, render a real link instead: render={<a href="…" />}.

• Give every icon-only button an aria-label in Title Case (Add Reaction). On devices with a pointer, add a Tooltip with the same name and the shortcut.
• While loading, the button is aria-disabled and the spinner is named by loadingLabel. Set loadingLabel to what is happening.
• Use focusableWhenDisabled when a Tooltip has to explain why an action is unavailable: the button stays focusable and keeps the disabled look.