Skip Navigation
React Magma

Button

Buttons are clickable items used to perform an action. See the Button Design Guidelines for more information on when to use the different kinds of buttons.

Basic Usage

When using multiple buttons, they should be wrapped in a ButtonGroup.

When used with icons, the Button component takes a slightly different set of props. For information on how to use this component with icons, please see documentation on Icon Buttons.

Sizes

Sizes for buttons include small, medium, and large, with medium being the default value.

import React from 'react';
import { Button, ButtonSize, ButtonGroup } from 'react-magma-dom';


export function Example() {
  return (
    <ButtonGroup>
      <Button size={ButtonSize.small}>Small</Button>
      <Button>Default</Button>
      <Button size={ButtonSize.large}>Large</Button>
    </ButtonGroup>
  );
}

Colors

Colors for buttons include primary, secondary, subtle, danger, success, and marketing with primary being the default value.

import React from 'react';
import { Button, ButtonColor, ButtonGroup } from 'react-magma-dom';


export function Example() {
  return (
    <ButtonGroup>
      <Button color={ButtonColor.primary}>Primary (default)</Button>
      <Button color={ButtonColor.secondary}>Secondary</Button>
      <Button color={ButtonColor.subtle}>Subtle</Button>
      <Button color={ButtonColor.danger}>Danger</Button>
      <Button color={ButtonColor.success}>Success</Button>
      <Button color={ButtonColor.marketing}>Marketing</Button>
    </ButtonGroup>
  );
}

Variants

Variants for buttons include solid and link, with solid being the default value.

The marketing buttons can only use the solid variant.

import React from 'react';
import {
  Button,
  ButtonColor,
  ButtonVariant,
  ButtonGroup,
} from 'react-magma-dom';


export function Example() {
  return (
    <>
      <ButtonGroup>
        <Button color={ButtonColor.primary} variant={ButtonVariant.solid}>
          Solid (default)
        </Button>
        <Button color={ButtonColor.primary} variant={ButtonVariant.link}>
          Link
        </Button>
      </ButtonGroup>
      <br />
      <ButtonGroup>
        <Button color={ButtonColor.secondary} variant={ButtonVariant.solid}>
          Solid (default)
        </Button>
      </ButtonGroup>
      <br />
      <ButtonGroup>
        <Button color={ButtonColor.danger} variant={ButtonVariant.solid}>
          Solid (default)
        </Button>
        <Button color={ButtonColor.danger} variant={ButtonVariant.link}>
          Link
        </Button>
      </ButtonGroup>
    </>
  );
}

Shapes

Shapes for buttons include fill, leftCap, and rightCap, with fill being the default value.

import React from 'react';
import { Button, ButtonColor, ButtonShape, ButtonGroup } from 'react-magma-dom';


export function Example() {
  return (
    <ButtonGroup>
      <Button color={ButtonColor.primary}>Fill (default)</Button>
      <Button color={ButtonColor.primary} shape={ButtonShape.leftCap}>
        Left Cap
      </Button>
      <Button color={ButtonColor.primary} shape={ButtonShape.rightCap}>
        Right Cap
      </Button>
    </ButtonGroup>
  );
}

Loading

When a button is in a loading state, the label can be replaced with a loading spinner using the isLoading prop.

import React from 'react';
import { Button, ButtonGroup, VisuallyHidden } from 'react-magma-dom';


export function Example() {
  const [isLoading, setIsLoading] = React.useState(false);
  React.useEffect(() => {
    if (isLoading) {
      setTimeout(() => {
        setIsLoading(false);
      }, 4000);
    }
  }, [isLoading]);


  return (
    <>
      <p>Click the button below to show the loading state</p>
      <VisuallyHidden>
        <span role="status">{isLoading ? 'Loading...' : 'Ready'}</span>
      </VisuallyHidden>
      <ButtonGroup>
        <Button isLoading={isLoading} onClick={() => setIsLoading(true)}>
          Save
        </Button>
      </ButtonGroup>
    </>
  );
}

Inverse

The isInverse property is an optional boolean, that reverses the colors so that the buttons can better appear on a dark background. The default value is false.

While link isInverse buttons still accepts the color property, the color property only affects solid isInverse buttons.

The marketing button does not have an inverse state, as it already is styled to appear well against a dark background.

import React from 'react';
import {
  Button,
  ButtonColor,
  ButtonVariant,
  ButtonGroup,
  Card,
  CardBody,
} from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <ButtonGroup>
          <Button isInverse>Solid inverse</Button>
          <Button color={ButtonColor.secondary} isInverse>
            Solid secondary inverse
          </Button>
          <Button color={ButtonColor.subtle} isInverse>
            Solid subtle inverse
          </Button>
          <Button color={ButtonColor.danger} isInverse>
            Solid danger inverse
          </Button>
          <Button color={ButtonColor.success} isInverse>
            Solid success inverse
          </Button>
          <Button color={ButtonColor.marketing} isInverse>
            Solid marketing inverse
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button variant={ButtonVariant.link} isInverse>
            Link inverse
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button disabled isInverse>
            Disabled inverse
          </Button>
          <Button disabled isInverse variant={ButtonVariant.link}>
            Disabled link inverse
          </Button>
        </ButtonGroup>
      </CardBody>
    </Card>
  );
}

Text Transform

Options for the textTransform prop for buttons include uppercase and none, with uppercase (all caps) being the default value. This sets the CSS text-transform property.

import React from 'react';
import { Button, ButtonTextTransform, ButtonGroup } from 'react-magma-dom';


export function Example() {
  return (
    <ButtonGroup>
      <Button>All caps (default)</Button>
      <Button textTransform={ButtonTextTransform.none}>
        No Text Transform
      </Button>
      <Button textTransform={ButtonTextTransform.uppercase}>
        Uppercase transform
      </Button>
    </ButtonGroup>
  );
}

Full Width

Passing the isFullWidth property will set the button to display full-width.

import React from 'react';
import { Button, ButtonColor } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Button isFullWidth>Full Width button</Button>
      <br />
      <Button isFullWidth color={ButtonColor.secondary}>
        Full Width button
      </Button>
    </>
  );
}

Disabled

import React from 'react';
import { Button, ButtonVariant, ButtonGroup } from 'react-magma-dom';


export function Example() {
  return (
    <ButtonGroup>
      <Button disabled>Disabled (default)</Button>
      <Button disabled variant={ButtonVariant.solid}>
        Disabled Solid
      </Button>
      <Button disabled variant={ButtonVariant.link}>
        Disabled Link
      </Button>
    </ButtonGroup>
  );
}

Types

The button types submit and reset are able to be passed in to change the buttons behavior in forms. By default, buttons will have a type of button.

import React from 'react';
import {
  Button,
  ButtonType,
  ButtonGroup,
  Input,
  Spacer,
} from 'react-magma-dom';


export function Example() {
  const inputRef = React.useRef<HTMLInputElement>();


  function onFormSubmit(event: React.FormEventHandler) {
    event.preventDefault();
    alert('Form Submitted');
  }


  function onFormReset(event: React.FormEventHandler) {
    event.preventDefault();
    inputRef.current.value = '';
  }


  return (
    <form onSubmit={onFormSubmit} onReset={onFormReset}>
      <Input ref={inputRef} labelText="Form Field" value="" />
      <Spacer size="12" />
      <ButtonGroup>
        <Button type={ButtonType.submit}>Submit</Button>
        <Button type={ButtonType.reset}>Reset</Button>
      </ButtonGroup>
    </form>
  );
}

Event Handling

The onClick event will fire when the button is clicked, or when the enter or space bar key is pressed. Events do not fire on disabled buttons.

import React from 'react';
import { Button, ButtonGroup } from 'react-magma-dom';


export function Example() {
  const [counter, setCounter] = React.useState<number>(0);


  function handleUpdateCounter() {
    setCounter(count => count + 1);
  }


  return (
    <>
      <p>
        <strong>Counter: </strong> <span id="counter">{counter}</span>
      </p>
      <ButtonGroup>
        <Button onClick={handleUpdateCounter}>Click me</Button>
        <Button disabled onClick={handleUpdateCounter}>
          Click me
        </Button>
      </ButtonGroup>
    </>
  );
}

Forward Ref

Using React's forwardRef feature you can gain access to the reference of the internal button.

import React from 'react';
import { Button, ButtonGroup } from 'react-magma-dom';


export function Example() {
  const buttonRef = React.useRef<HTMLButtonElement>();


  function handleButtonFocus() {
    buttonRef.current.focus();
  }


  return (
    <ButtonGroup>
      <Button ref={buttonRef}>Button to be focused</Button>
      <Button onClick={handleButtonFocus}>Click to focus other button</Button>
    </ButtonGroup>
  );
}

Testing

Passing in the testId prop will add the data-testid attribute to the button element for easier querying in tests.

<button testId="test-id">Default</button>

Button Props

This component uses forwardRef. The ref is applied to the button element.

All of the standard button attributes can be provided as props and will be applied to the button element that gets rendered.

color

Description

The color of the button, indicating its function in the UI

Type

enum, one of:
ButtonColor.danger
ButtonColor.marketing
ButtonColor.primary
ButtonColor.secondary
ButtonColor.subtle
ButtonColor.success

Default

ButtonColor.primary

isFullWidth

Description

Set the button to display full-width.

Type

boolean

Default

false

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

isLoading

Description

Set the button to a loading state

Type

boolean

Default

false

shape

Description

Defines the border radius

Type

enum, one of:
ButtonShape.fill
ButtonShape.leftCap
ButtonShape.rightCap
ButtonShape.round

Default

ButtonShape.fill

size

Description

The relative size of the button

Type

enum, one of:
ButtonSize.large
ButtonSize.medium
ButtonSize.small

Default

ButtonSize.medium

textTransform

Description

Determines whether the button appears in all-caps

Type

enum, one of:
ButtonTextTransform.none
ButtonTextTransform.uppercase

Default

ButtonTextTransform.uppercase

type

Description

The type attribute of the button ButtonType.button

Type

enum, one of:
ButtonType.button
ButtonType.reset
ButtonType.submit

Default

-

variant

Description

The variant of the button

Type

enum, one of:
ButtonVariant.link
ButtonVariant.solid

Default

ButtonVariant.solid

On this page

Deploys by Netlify