Button

A clickable element that triggers an action.

Usage

To create a basic button, wrap text in a <Button>.

import { Button } from "stylus-ui/Button";
import { useToast } from "stylus-ui/Toast";

export default () => {
  const { toast } = useToast();
  const handleClick = () => toast({ title: "Hello!" });

  return <Button onClick={handleClick}>Button</Button>;
};

Colors

Buttons come in five variants: primary (default), secondary, danger, ghost, and link.

import { Button } from "stylus-ui/Button";

export default () => (
  <div className="flex flex-wrap justify-center gap-2">
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="danger">Danger</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="link">Link</Button>
  </div>
);

Icons

Import any icons from Font Awesome and pass them to the icon or iconEnd props. Style overrides can be set with iconProps or iconEndProps.

import { Button } from "stylus-ui/Button";
import {
  faArrowRight,
  faTrash,
  faUserPlus,
} from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex gap-2">
    <Button icon={faUserPlus} variant="primary">
      Add user
    </Button>
    <Button iconEnd={faArrowRight} variant="secondary">
      Continue
    </Button>
    <Button icon={faTrash} variant="danger">
      Delete
    </Button>
  </div>
);

Icon-only buttons

Icons can be displayed with or without text.

import { Button } from "stylus-ui/Button";
import {
  faPlus,
  faTrash,
  faEdit,
  faEllipsis,
} from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex flex-col items-center gap-2">
    {["small", "default"].map((size) => (
      <div key={size} className="flex gap-2">
        <Button
          icon={faPlus}
          variant="secondary"
          aria-label="Add"
          size={size}
        />
        <Button icon={faEdit} variant="primary" aria-label="Edit" size={size} />
        <Button
          icon={faTrash}
          variant="danger"
          aria-label="Delete"
          size={size}
        />
        <Button
          icon={faEllipsis}
          variant="ghost"
          aria-label="More"
          size={size}
        />
      </div>
    ))}
  </div>
);

To display a dropdown caret, add the dropdown prop.

import { Button } from "stylus-ui/Button";

export default () => (
  <Button variant="secondary" dropdown>
    More
  </Button>
);

Links

Links can be styled as buttons by passing in an href. When href is defined, Button inherits properties from HTMLAnchorElement so you can set properties like rel and target.

I'm a link!

import { Button } from "stylus-ui/Button";

export default () => (
  <Button variant="link" href="https://stylus.design">
    I'm a link!
  </Button>
);

Loading

An icon can be put into a loading state with the loading prop. It’s good practice to also disable loading buttons to prevent duplicate submissions.

import { Button } from "stylus-ui/Button";

export default () => (
  <Button variant="primary" loading disabled>
    Loading
  </Button>
);

Sizing

Buttons can be small, default, large, or huge.

import { Button } from "stylus-ui/Button";
import { faUser } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex items-center gap-2">
    <Button size="small" icon={faUser} variant="secondary">
      Small
    </Button>
    <Button size="default" icon={faUser} variant="secondary">
      Default
    </Button>
    <Button size="large" icon={faUser} variant="secondary">
      Large
    </Button>
    <Button size="huge" icon={faUser} variant="secondary">
      Huge
    </Button>
  </div>
);

Button Groups

To display buttons squished together as a single unit, wrap them in a ButtonGroup.

import { Button, ButtonGroup } from "stylus-ui/Button";
import { faLink } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <ButtonGroup>
    <Button>Share</Button>
    <Button icon={faLink} aria-label="Copy link" />
  </ButtonGroup>
);

Passing down styles

Define a variant, size, or theme on ButtonGroup and it will be applied to all children.

import { Button, ButtonGroup } from "stylus-ui/Button";
import { faEllipsis } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <ButtonGroup variant="secondary" size="small">
    <Button>Delete</Button>
    <Button icon={faEllipsis} aria-label="More" />
  </ButtonGroup>
);

Dropdowns

To display a dropdown, import and use DropdownMenu within the ButtonGroup.

import { Button, ButtonGroup } from "stylus-ui/Button";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "stylus-ui/DropdownMenu";
import { faAngleDown, faLink } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <ButtonGroup variant="secondary">
    <Button icon={faLink}>Share</Button>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button dropdown aria-label="More details" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Copy link</DropdownMenuItem>
        <DropdownMenuItem>Edit permissions</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </ButtonGroup>
);

API Reference

`Button`

Inherits properties from HTMLAnchorElement (when href is defined) or HTMLButtonElement (when href is not defined).

Prop	Type	Default
`children`	`ReactNode`
`disabled`	`boolean`	`false`
`dropdown`	`boolean`	`false`
`href`	`string`
`icon`	`IconDefinition`
`iconEnd`	`IconDefinition`
`iconEndProps`	`Omit<FontAwesomeIconProps, 'icon'>`
`iconProps`	`Omit<FontAwesomeIconProps, 'icon'>`
`loading`	`boolean`	`false`
`size`	`"small""default""large""huge"`	`"default"`
`theme`	`"light""dark"`	`"light"`
`variant`	`"primary""secondary""danger""ghost""link"`	`"primary"`

`ButtonGroup`

Inherits properties from HTMLElement.

Prop	Type	Default
`children`	`ReactNode`
`size`	`"small""default""large""huge"`
`theme`	`"light""dark"`
`variant`	`"primary""secondary""danger""ghost""link"`