This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Button

To add the Button component to your app:

1
2
import { Button } from '@forge/react';

Description

A button that triggers an event or action.

Props

Name	Type	Required	Description
`onClick`	`() => void \| Promise<void>`		Handler to be called on click.
`children`	`string`	Yes	The button's label text.
`appearance`	`string`		The appearance of the button. Valid values are: `default` `subtle` `link` `subtle-link` `warning` `danger` Default value is `default`.
`disabled`	`boolean`		Whether the user interaction is disabled. Defaults to `false`.
`icon`	`string`		An icon to display with the button's text. Valid values are icons from @atlaskit/icon. For example, `"add-circle"` or `"graph-line"`.
`iconPosition`	string		Where to render the icon relative to the `text`. Valid values are: `"before" \| "after"`. Defaults to `"before"`.

Examples

Appearance property

default

Use the default appearance for most buttons.

1
2
import { Button } from '@forge/react';
<Button
  appearance="default"
  onClick={() => {
    // Handle button click
  }}
>
  Default button
</Button>

subtle

Use a subtle button for secondary actions, such as “Cancel".

1
2
import { Button } from '@forge/react';
<Button
  appearance="subtle"
  onClick={() => {
    // Handle button click
  }}
>
  Subtle button
</Button>

link

Similar to a subtle button, a link button can be used for secondary actions.

1
2
import { Button } from '@forge/react';
<Button
  appearance="link"
  onClick={() => {
    // Handle button click
  }}
>
  Link button
</Button>

subtle-link

Similar to a subtle button, but behaves like a link button. Use a subtle-link button to avoid overwhelming the page with blue links.

1
2
import { Button } from '@forge/react';
<Button
  appearance="subtle-link"
  onClick={() => {
    // Handle button click
  }}
>
  Subtle-link button
</Button>

warning

A warning button appears before we request the user to take action, usually in anticipation of a significant change. These are found mostly in confirmation modals.

1
2
import { Button } from '@forge/react';
<Button
  appearance="warning"
  onClick={() => {
    // Handle button click
  }}
>
  Warning button
</Button>

danger

Use a danger button as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals.

1
2
import { Button } from '@forge/react';
<Button
  appearance="danger"
  onClick={() => {
    // Handle button click
  }}
>
  Danger button
</Button>

Disabled property

Use the disabled appearance to indicate a button that is not usable. Also set the disabled property to true.

1
2
import { Button } from '@forge/react';
<Button
  appearance="disabled"
  onClick={() => {
    // Handle button click
  }}
  disabled={true}
>
  Default button
</Button>

Icon and icon position properties

Set the icon property to add-circle and the iconPosition property to before, to position the icon before the button's label.

1
2
import { Button } from '@forge/react';
<Button
  appearance="default"
  icon="add-circle"
  iconPosition="before"
  onClick={() => {
    // Handle button click
  }}
>
  Default button
</Button>

Set the icon property to add-circle and the iconPosition property to after, to position the icon after the button's label.

1
2
import { Button } from '@forge/react';
<Button
  appearance="default"
  icon="add-circle"
  iconPosition="after"
  onClick={() => {
    // Handle button click
  }}
>
  Default button
</Button>