Button

Source code
import { Button } from "rfui";

#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 class="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 class="gap-3">
  <Button variant="danger-primary">Primary</Button>
  <Button variant="danger-secondary">Secondary</Button>
  <Button variant="danger-tertiary">Tertiary</Button>
</Flex>

#Size

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

<Stack class="gap-5">
  <Flex class="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 class="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 class="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 class="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 class="gap-5">
  <Flex class="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 class="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 class="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 class="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 class="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 class="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>

#Props

PropRequiredDefaultType and notes
variant-"secondary"
"primary" | "secondary" | "tertiary" | "danger-primary" | "danger-secondary" | "danger-tertiary"
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.
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 class={className} {...restWithoutClass}>
  ...
</button>