Button

Primary action button to trigger an operation.

import { Button } from "rizzui";

Default

The default style of Button component.

import { Button } from "rizzui";

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

Variants

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

import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button variant="text">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="flat">Button</Button>
      <Button variant="solid">Button</Button>
    </>
  );
}

Sizes

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

import { Button } from "rizzui";

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

Rounded

You can change the border radius of the Button using rounded property.

import { Button } from "rizzui";

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

Colors

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

import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button>Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="danger">Danger</Button>
    </>
  );
}

Loading

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

import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button isLoading={true}>Primary</Button>
      <Button
        isLoading={true}
        color="secondary"
      >
        Secondary
      </Button>
      <Button
        isLoading={true}
        color="danger"
      >
        Danger
      </Button>
    </>
  );
}

Disabled

This is the disabled style of the Button component.

import { Button } from "rizzui";

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

With Icon

You can set any Icon at any possition.

import { Button } from "rizzui";
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"
rounded	ButtonRounded	Set border radius of the button component	"md"
color	ButtonColors	Change button color	"primary"
isLoading	boolean	Set the loading status of button	__
disabled	boolean	Disabled state of the button	__
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" | "flat" | "outline" | "text";

Button Sizes

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

Button Rounded

type ButtonRounded = "sm" | "md" | "lg" | "none" | "pill";

Button Colors

type ButtonColors = "primary" | "secondary" | "danger";