Button
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
Section titled “Colors”Buttons come in four variants: primary (default), secondary, danger, and ghost.
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> </div>);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
Section titled “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>);Dropdown buttons
Section titled “Dropdown buttons”To display a dropdown caret, add the dropdown prop.
import { Button } from "stylus-ui/Button";
export default () => ( <Button variant="secondary" dropdown> More </Button>);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.
import { Button } from "stylus-ui/Button";
export default () => <Button href="https://stylus.design">I'm a link!</Button>;Loading
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “API Reference”Button
Section titled “Button”A clickable element that triggers an action.
disabled
Disable the button, preventing it from being clicked.
dropdown
Display a caret icon to indicate that this button opens a dropdown menu.
href
Navigate to a URL when clicked. If provided, the button will render as an anchor element.
icon
Display an icon at the start of the button.
iconEnd
Display an icon at the end of the button.
iconEndProps
Props to pass to the icon component at the end of the button.
iconProps
Props to pass to the icon component at the start of the button.
loading
Display a loading indicator to the left of the button.
size
The size of the button.
theme
The theme of the button.
variant
The variant of the button.
primary: A primary button with a brand gradient background. Limit usage to one per page.secondary: A secondary button with a plain stroke. Use for most buttons.ghost: A ghost button with a transparent background. Use for buttons that should blend into the background.danger: A danger button with a red background. Use for destructive actions.
ButtonGroup
Section titled “ButtonGroup”Group multiple buttons together without space between.