Skip to main content

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.

PropsTypeDescriptionDefault
asbutton or spanRender as"button"
childrenReact.ReactNodeAccepts everything React can render__
typeButtonTypesSet the original HTML type of button"button"
variantButtonVariantsSet the button variants"solid"
sizeButtonSizesSet the size of the component.
"sm" is equivalent to the dense button styling.
"md"
roundedButtonRoundedSet border radius of the button component"md"
colorButtonColorsChange button color"primary"
isLoadingbooleanSet the loading status of button__
disabledbooleanDisabled state of the button__
classNamestringAdd custom classes for extra style__
refRef<HTMLButtonElement>forwardRef__
...ButtonHTMLAttributes or HTMLAttributesnative 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";