Skip to content
Stylus UI

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 prop. Icons can be positioned on the left (default) or right.

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


export default () => (
  <div className="flex gap-2">
    <Button icon={faUserPlus} variant="primary">
      Add user
    </Button>
    <Button icon={faAngleDown} iconPosition="right" variant="secondary">
      Settings
    </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>
);

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";


export default () => (
  <div className="flex items-center gap-2">
    <Button size="small" variant="secondary">
      Small
    </Button>
    <Button size="default" variant="secondary">
      Default
    </Button>
    <Button size="large" variant="secondary">
      Large
    </Button>
    <Button size="huge" 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>
);

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 } from "@fortawesome/pro-regular-svg-icons";


export default () => (
  <ButtonGroup variant="secondary">
    <Button>Share</Button>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button icon={faAngleDown} 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
asChild boolean false
children ReactNode
disabled boolean false
href string
icon IconDefinition
iconPosition "left""right" "left"
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"