Button

Source code
import { Button } from "rfui-package";

#Basic

<Button>Example</Button>

#Handle click

Passing onClick works because of ...rest.
<Button onClick={onClick}>Example</Button>

#Variant

Set variant to either "primary", "secondary", or "tertiary". Defaults to "secondary".
<Flex className="gap-3">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="tertiary">Tertiary</Button>
</Flex>

#Danger variants

Set variant to either "danger-primary", "danger-secondary", or "danger-tertiary".

<Flex className="gap-3">
  <Button variant="danger-primary">Primary</Button>
  <Button variant="danger-secondary">Secondary</Button>
  <Button variant="danger-tertiary">Tertiary</Button>
</Flex>

#Link variant

With varaint set to "link" the component will look like a link but will still behave link a button.
<Button variant="link">Link variant</Button>

#Link behavior

With href set, the component will behave like a link. In fact, an a tag will be rendered instead of a button tag.
Example
<Button href="https://example.com">Example</Button>

#Size

Set size to either "sm", "md", "lg", or "block". Defaults to "md".

<Stack className="gap-5">
  <Flex className="gap-3">
    <Button variant="primary" size="sm">Primary</Button>
    <Button variant="secondary" size="sm">Secondary</Button>
    <Button variant="tertiary" size="sm">Tertiary</Button>
  </Flex>
  <Flex className="gap-3">
    <Button variant="primary" size="md">Primary</Button>
    <Button variant="secondary" size="md">Secondary</Button>
    <Button variant="tertiary" size="md">Tertiary</Button>
  </Flex>
  <Flex className="gap-3">
    <Button variant="primary" size="lg">Primary</Button>
    <Button variant="secondary" size="lg">Secondary</Button>
    <Button variant="tertiary" size="lg">Tertiary</Button>
  </Flex>
  <Stack className="w-full gap-3">
    <Button variant="primary" size="block">Primary</Button>
    <Button variant="secondary" size="block">Secondary</Button>
  </Stack>
</Stack>

#Rounded

Set rounded to either "square", "sm", "lg", or "full". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
<Stack className="gap-5">
  <Flex className="gap-3">
    <Button variant="primary" rounded="square">Primary</Button>
    <Button variant="secondary" rounded="square">Secondary</Button>
    <Button variant="tertiary" rounded="square">Tertiary</Button>
  </Flex>
  <Flex className="gap-3">
    <Button variant="primary" rounded="sm">Primary</Button>
    <Button variant="secondary" rounded="sm">Secondary</Button>
    <Button variant="tertiary" rounded="sm">Tertiary</Button>
  </Flex>
  <Flex className="gap-3">
    <Button variant="primary" rounded="lg">Primary</Button>
    <Button variant="secondary" rounded="lg">Secondary</Button>
    <Button variant="tertiary" rounded="lg">Tertiary</Button>
  </Flex>
  <Flex className="gap-3">
    <Button variant="primary" rounded="full">Primary</Button>
    <Button variant="secondary" rounded="full">Secondary</Button>
    <Button variant="tertiary" rounded="full">Tertiary</Button>
  </Flex>
</Stack>

#Disabled

Set disabled to either true or false. Defaults to false.
<Flex className="gap-3">
  <Button disabled variant="primary">Primary</Button>
  <Button disabled variant="secondary">Secondary</Button>
  <Button disabled variant="tertiary">Tertiary</Button>
</Flex>

#Loading

Set isLoading to either true or false. Defaults to false.

Set loadingContent to the content you want to display when isLoading is true.

<Flex className="gap-3">
  <Button variant="primary" isLoading loadingContent="Loading...">
    Primary
  </Button>
  <Button variant="secondary" isLoading loadingContent="Loading...">
    Secondary
  </Button>
  <Button variant="tertiary" isLoading loadingContent="Loading...">
    Tertiary
  </Button>
</Flex>

#With icon

Icons should typically appear to the left of the other content in the button.
<Button>
  <span>＋</span> Example
</Button>

#Icon only (text)

<Button>＋</Button>

#Icon only (SVG)

You might need to give your SVG an explicit height and width.
<Button>
  <PlusIcon className="h-5 w-4" />
</Button>

#Props

PropRequiredDefaultType and notes
variant-"secondary"
"primary" | "secondary" | "tertiary" | "danger-primary" | "danger-secondary" | "danger-tertiary" | "link"
size-"md"
"sm" | "md" | "lg" | "block"
rounded--
"square" | "sm" | "lg" | "full"
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
isLoading-false
boolean
When true, the button will appear disabled.
loadingContent--
string
The text to change the button's content to when loading. Ie. when isLoading is true.
href--
string
children-
ComponentChild
...rest--
Omit<ComponentProps<"button">, "icon" | "size">
See the docs for rest parameters. For Button, you could pass anything you normally would pass to <button> because the container looks something like this:
<button className={className} {...restWithoutClass}>
  ...
</button>