Button

Trigger an action, with variants, sizes and a built-in loading state. Includes IconButton, ButtonGroup and CloseButton.

React, Vue, Solid, and Svelte

SourceRecipe

A native button styled with the button recipe. loading replaces the label with a spinner and disables the button, and loadingText shows text next to the spinner instead. The package also exports IconButton, ButtonGroup and CloseButton, and ButtonPropsProvider sets shared props for every button inside it.

Usage

import { Button } from "@isbatak/react-ui/button"
import { HStack } from "styled-system/jsx"

export function ButtonDemo() {
  return (
    <HStack gap="2" flexWrap="wrap" justifyContent="center">
      <Button variant="solid">Solid</Button>
      <Button variant="surface">Surface</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button loading>Save</Button>
    </HStack>
  )
}