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

Dark mode

When setting a button on a dark background, enable darkMode to maintain a high color contrast between the button and the background.

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


export default () => (
  <div className="flex flex-wrap justify-center gap-2">
    <Button variant="primary" darkMode>
      Primary
    </Button>
    <Button variant="secondary" darkMode>
      Secondary
    </Button>
    <Button variant="danger" darkMode>
      Danger
    </Button>
    <Button variant="ghost" darkMode>
      Ghost
    </Button>
    <Button variant="link" darkMode>
      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"
          screenReaderLabel="Add"
          size={size}
        />
        <Button
          icon={faEdit}
          variant="primary"
          screenReaderLabel="Edit"
          size={size}
        />
        <Button
          icon={faTrash}
          variant="danger"
          screenReaderLabel="Delete"
          size={size}
        />
        <Button
          icon={faEllipsis}
          variant="ghost"
          screenReaderLabel="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";
import { faGlobe, faAngleDown } from "@fortawesome/pro-regular-svg-icons";


export default () => (
  <div className="flex gap-2">
    <Button variant="primary" loading disabled>
      Loading
    </Button>
  </div>
);

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

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
darkMode boolean false
disabled boolean false
hasCustomHoverEffect boolean false
href string
icon IconProp
iconPosition "left""right" "left"
iconProps Omit<FontAwesomeIconProps, 'icon'>
loading boolean false
screenReaderLabel string
size "small""default""large""huge" "default"
variant "primary""secondary""danger""ghost""link" "primary"