About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

This section 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

NameTypeRequiredDescription
onClick() => void | Promise<void>Handler to be called on click.
childrenstringYesThe button's label text.
appearancestringThe appearance of the button. Valid values are:
  • default
  • subtle
  • link
  • subtle-link
  • warning
  • danger

  • Default value is 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".
    iconPositionstringWhere 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.

    Example image of rendered button

    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".

    Example image of rendered button

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



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

    Example image of rendered button

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



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

    Example image of rendered button

    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.

    Example image of rendered button

    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.

    Example image of rendered button

    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.

    Example image of rendered button

    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.

    Example image of rendered button

    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.

    Example image of rendered button

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

    Rate this page: