Button

RhButton is a versatile button component that can be used to perform various actions in different scenarios.

Usage

Once installed, you can import the RhButton component into your React application:

copy

import {RhButton} from "@rhythm-ui/react"

Then, you can use the RhButton component in your JSX code:

copy

<RhButton>Click Me!</RhButton>

Button Button Props

Name	Type	Default	Description
tag	string	button	Specifies the HTML tag for the button.
type	"button" \| "submit" \| "reset"	button	Determines the type of the button.
disabled	boolean	false	Disables the button if set to true.
size	"xs" \| "sm" \| "base" \| "lg" \| "xl"	base	Specifies the size of the button.
icon	string		Determines the icon to be displayed on the button.
iconLeft	string		Determines the icon to be displayed on the left side of the button.
iconRight	string		Determines the icon to be displayed on the right side of the button.
layout	"outline" \| "link" \| "solid"	solid	Determines the visual style of the buttons.
variant	"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "white"	primary	Determines the color scheme of the button.
block	boolean	false	Determines whether a button should hold the full width of its container.

Button Sizes

You can adjust the size of the buttons by utilizing the size prop, which allows you to specify whether the buttons should be larger or smaller.

copy

<div className="flex items-center gap-3">
  <RhButton size="xs">Button text</RhButton>
  <RhButton size="sm">Button text</RhButton>
  <RhButton>Button text</RhButton>
  <RhButton size="lg">Button text</RhButton>
  <RhButton size="xl">Button text</RhButton>
</div>

Button variants

The variant prop controls the colors used for the button.

copy

<div className="flex items-center gap-3">
  <RhButton variant="primary">Button Primary</RhButton>
  <RhButton variant="secondary">Button Secondary</RhButton>
  <RhButton variant="success">Button Success</RhButton>
  <RhButton variant="warning">Button Warning</RhButton>
  <RhButton variant="danger">Button Danger</RhButton>
  <RhButton variant="white">Button White</RhButton>
</div>

Button Layouts

The layout prop determines how the button will look.

copy

<div className="flex items-center gap-3">
  <RhButton layout="solid">Button Solid</RhButton>
  <RhButton layout="outline">Button Outline</RhButton>
  <RhButton layout="link">Button Link</RhButton>
</div>

Button Icon

The icon prop determines whether an icon should be displayed inside the button. Use it when you want a button with only an icon else use iconLeft & iconRight props. The value of this prop should be an iconify string, which is a special syntax for embedding icons in your code.

copy

<RhButton icon="heroicons:envelope-20-solid" />

Button Icon Left

The iconLeft prop determines which icon should be displayed on the left side of the button. The value of this prop should be an iconify string, which is a special syntax for embedding icons in your code. If the iconLeft prop is not set, no icon will be displayed on the left side of the button.

copy

<RhButton iconLeft="heroicons:envelope-20-solid">Button text</RhButton>

Button Icon Right

The iconRight prop determines which icon should be displayed on the right side of the button. The value of this prop should be an iconify string, which is a special syntax for embedding icons in your code. If the iconRight prop is not set, no icon will be displayed on the right side of the button.

copy

<RhButton iconRight="heroicons:envelope-20-solid">Button text</RhButton>

Button Rounded

The rounded prop specifies whether the button should have a circular shape by setting the border radius to 100%.

copy

<RhButton rounded>Button text</RhButton>

Button Circular

When the rounded prop is set to true and the button has no content then the button will have rounded corners and an equal height and width, giving it a circular appearance.

copy

<div className="flex justify-around items-end px-32">
  <RhButton
    aria-label="add"
    variant="primary"
    size="xs"
    icon="heroicons:plus"
    rounded
  />
  <RhButton
    aria-label="add"
    variant="primary"
    size="sm"
    icon="heroicons:plus"
    rounded
  />
  <RhButton
    aria-label="add"
    variant="primary"
    size="base"
    icon="heroicons:plus"
    rounded
  />
  <RhButton
    aria-label="add"
    variant="primary"
    size="lg"
    icon="heroicons:plus"
    rounded
  />
  <RhButton
    aria-label="add"
    variant="primary"
    size="xl"
    icon="heroicons:plus"
    rounded
  />
</div>