Button

Import statement

import { Button } from "@wfp/react"

Primary button

<Button kind="primary">Button</Button>;

All button kinds

<>
  {buttonKinds
    .filter(
      (e) =>
        e === "primary" ||
        e === "secondary" ||
        e === "ghost" ||
        e === "danger"
    )
    .map((e) => (
      <div
        style={{
          display: "inline-block",
          padding: "0.3rem",
        }}
      >
        <Button kind={e}>{e}</Button>{" "}
        <Button disabled kind={e}>
          {e} disable
        </Button>
      </div>
    ))}
</>;

By changing the kind prop you can use different styles of the button.

Icon examples

<>
  <Button icon={AddCircle} kind="primary">
    With icon
  </Button>{" "}
  <Button kind="secondary" icon={AddCircle}></Button>{" "}
  <Button
    iconReverse
    kind="secondary"
    icon={AddCircle}
  >
    iconReverse
  </Button>{" "}
  <Button href="#" icon={AddCircle} kind="primary">
    Icon link
  </Button>{" "}
  <Button
    href="#"
    kind="secondary"
    icon={AddCircle}
  ></Button>{" "}
  <Button
    href="#"
    iconReverse
    kind="secondary"
    icon={AddCircle}
  >
    IconReverse link
  </Button>
</>;

When words are not enough, icons can be used in buttons to better communicate what the button does. Icons should be always paired with text whenever possible.

Use the icon and iconDescription prop to add an Icon to the Button. Refer to the Icon documentation for usage.

To show the Icon on the left side use the iconReverse prop.

Using a Button with only an Icon while not beeing recommended can be achieved by leaving the Button text blank.

import { Button } from "@wfp/react";
import { AddCircle } from "@wfp/icons-react";

<>
  <Button icon={AddCircle} kind="primary">
    Button with icon
  </Button>{" "}
  <Button kind="secondary" icon={AddCircle}></Button>{" "}
  <Button
    iconReverse
    kind="secondary"
    icon={AddCircle}
  >
    With iconReverse
  </Button>
</>;

Link vs. Button

When applying a href prop the button will use an <a> anchor element instead of a button. This way Button can be used like a link.

<Button href="https://wfp.org">Small button</Button>
/*
Will result in 
<a href="https://wfp.org" class="wfp--btn wfp--btn--primary" role="button">
  Small button
</a>
*/

Small

Small buttons may be used when there is not enough space for a regular-sized button. This issue is most found in tables. Small button should have three words or less.

import { Button } from "@wfp/react";
import { AddCircle } from "@wfp/icons-react";

<>
  <Button small>Small button</Button>{" "}
  <Button icon={AddCircle} kind="secondary" small>
    With icon
  </Button>
</>;

Large

Large buttons may be used for main primary actions where they are uses as the call to action.

import { Button } from "@wfp/react";
import { AddCircle } from "@wfp/icons-react";

<>
  <Button large>Large button</Button>{" "}
  <Button icon={AddCircle} kind="secondary" large>
    With icon
  </Button>
</>;

Animating

When clicking the Button a wfp--btn--animating class will be added to the element for 500 ms, which can be used for custom onClick animations.

// After onClick for 500ms
<button class="wfp--btn wfp--btn--primary wfp--btn--animating" type="button">
  Button
</button>

Removing focus

When using the button without page transition the focus will stay on the button when clicking it. By customzing the onClick function you can disable the focus.

function handleButtonClick(event) {
  btnRef.current.blur();
}

<Button onClick={handleButtonClick}>Text</Button>;

HTML

To use a button with plain HTML add wfp--btn and wfp--btn--{kind} as class to the <a> or <button> element.

<a class="wfp--btn wfp--btn--primary" href="#">Link</a>
<button class="wfp--btn wfp--btn--primary">Button</button>

All buttons can use icons. It’s recommended to use inline SVG icons when possible. Add the appropriate svg image to the button HTML with the wfp--btn__icon class. You can also include a title tag for better accessibility to describe what the button does.

All possible CSS classes can be found on the CSS Tab.

Related

Link

Reference

Carbon Design System Usage for Buttons