Buttons

Preview state

DefaultPendingDisabled

Usage

Use ButtonLabel to reserve space for changing labels of one action, such as Pause and Resume. A different action gets its own button. Pending actions retain focus and prevent repeated execution.

Exports / Button, ButtonLabel, ActionLink

Patterns

React

import { useState } from "react";
import { Button, ButtonLabel } from "./folio";

export function SaveStudy() {
  const [saved, setSaved] = useState(false);
  return (
    <Button emphasis="primary" aria-pressed={saved}
      onClick={() => setSaved(!saved)}>
      <ButtonLabel variants={["Save study", "Saved"]}>
        {saved ? "Saved" : "Save study"}
      </ButtonLabel>
    </Button>
  );
}