Last updated Jan 20, 2021

Button

A button that triggers an event or action. A row of buttons is displayed in a ButtonSet.

Screenshot of what the rendered button should look like

Import statement

1
2
import ForgeUI, { Button } from '@forge/ui';

Props

NameTypeRequiredDescription
onClick() => void | Promise<void>YesAn event handler that can be asynchronous. You can execute state updates inside this function.
textstringYesThe button's label text.
appearancestringThe appearance of the button. Valid values are danger, default, link, subtle, subtle-link, and warning. Defaults to default.
disabledbooleanWhether the user interaction is disabled. Defaults to false.
iconstringAn icon to display with the button's text. Valid values are icons from @atlaskit/icon. For example, "add-circle" or "graph-line".
iconPosition"before" | "after"Where to render the icon relative to the text. Defaults to "before".

Example

1
2
<Button
     text="Sign up"
     onClick={async () => {
       await postSignup(data);
     }}
/>

ButtonSet

A layout container for multiple buttons.

Screenshot of what the rendered button set should look like

Import statement

1
2
import ForgeUI, { ButtonSet } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<Button>YesThe buttons to display in the set. On large-width devices, the buttons are rendered in a row that wraps to fit. On mobile devices, the buttons are full-width.

Example

1
2
<ButtonSet>
  <Button text="Allow" onClick={handleAllow} />
  <Button text="Deny" onClick={handleDeny} />
</ButtonSet>

Rate this page: