Skip to main content

Button

Button in Storybook
note

There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Check out the Usage section for details about how to design a button properly, and the different alternatives and variants provided. Using the available properties you can create different variants of a button.

Simple button​

The Button component is made available from the @jutro/components package. There are 4 basic properties when working with the button: label, icon, variant and onClick. In most cases, these will be the only properties you will use.

import Button from '@jutro/components';

// ...

<Button
  label="Click me"
  icon="gw-bathtub"
  onClick={handleCLick}
/>;

Icon only button​

Using the hideLabel property you can create an Icon only button that does not display a label, but only the chosen icon. The label property will be used for the aria-label of the button.

<Button
  icon="gw-bathtub"
  label="this will be the aria-label text"
  onClick={handleClick}
  hideLabel
/>

In this case, the iconPosition property value will be ignored and the icon will be always displayed centered.

Async button​

When a button triggers an action and it needs to wait for its completion or to a specific event happening, it is possible to handle it:

import React, { useEffect, useState } from 'react';
import { InlineLoader } from '@jutro/components';
import { Button } from '@jutro/components';
import styles from './AsyncButton.module.css';

function getFromAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Done!');
    }, 2000);
  });
}

export function AsyncButtonExample() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function someAsyncFunction() {
      await getFromAPI();

      setLoading(false);
    }

    if (loading) {
      someAsyncFunction();
    }
  }, [loading]);

  return (
    <Button
      label={loading ? 'Saving' : 'Save'}
      renderIcon={() => <InlineLoader loading={loading} />}
      iconPosition="right"
      disabled={loading}
      onClick={() => setLoading(true)}
    />
  );
}

Button with tooltip​

Tooltip is added through composition: Tooltip + Button

<Tooltip content="This is a tooltip">
  <Button label="Click me" />
</Tooltip>
Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.