Button

Primary action button to trigger an operation.

import { Button } from "rizzui/button";

Default

The default style of Button component.

import { Button } from "rizzui/button";

export default function App() {
  return <Button>Button</Button>;
}

Variants

You can change the style of the Button using variant property.

import { Button } from "rizzui/button";

export default function App() {
  return (
    <>
      <Button variant="solid">Solid</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="flat">Flat</Button>
      <Button variant="text">Text</Button>
      <Button variant="danger">Danger</Button>
    </>
  );
}

Sizes

You can change the size of the Button using size property.

import { Button } from "rizzui/button";

export default function App() {
  return (
    <>
      <Button size="sm">Button</Button>
      <Button>Button</Button>
      <Button size="lg">Button</Button>
    </>
  );
}

Loading

You can set the loading state of the Button component using isLoading property.

import { Button } from "rizzui/button";

export default function App() {
  return (
    <>
      <Button isLoading={true}>Solid</Button>
      <Button isLoading={true} variant="outline">
        Outline
      </Button>
      <Button isLoading={true} variant="flat">
        Flat
      </Button>
      <Button isLoading={true} variant="danger">
        Danger
      </Button>
    </>
  );
}

Disabled

This is the disabled style of the Button component.

import { Button } from "rizzui/button";

export default function App() {
  return <Button disabled={true}>Disabled</Button>;
}

With Icon

You can set any Icon at any position.

import { Button } from "rizzui/button";
import { ArrowRightIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Button>
      <span>View Details</span>{" "}
      <ArrowRightIcon
        strokeWidth="2"
        className="h-4 w-4 ml-2"
      />
    </Button>
  );
}

API Reference

---

Button Props

Here is the API documentation of the Button component. And the rest of the props are the same as the original html button. You can use props like id, title, onClick, onFocus, onBlur etc.

Props	Type	Description	Default
as	button or span	Render as	"button"
children	React.ReactNode	Accepts everything React can render	__
type	ButtonTypes	Set the original HTML type of button	"button"
variant	ButtonVariants	Set the button variants	"solid"
size	ButtonSizes	Set the size of the component. "sm" is equivalent to the dense button styling.	"md"
isLoading	boolean	Set the loading status of button	__
disabled	boolean	Disabled state of the button	__
loader	React.ReactNode	Custom Loader component to show when isLoading	__
className	string	Add custom classes for extra style	__
ref	Ref<HTMLButtonElement>	forwardRef	__
...	ButtonHTMLAttributes or HTMLAttributes	native props like onClick, title, aria-label ...	__

Button Types

type ButtonTypes = "button" | "submit" | "reset";

Button Variants

type ButtonVariants = "solid" | "outline" | "flat" | "text" | "danger";

Button Sizes

type ButtonSizes = "sm" | "md" | "lg";