Button

Button component is used to trigger actions.

#
Documentation

#
Usage

Appearance

Size

import type { ComponentPropsWithRef } from "react";
 
import { Button } from "@optiaxiom/react";
 
export function App({
  appearance = "default",
  size = "md",
}: Pick<ComponentPropsWithRef<typeof Button>, "appearance" | "size">) {
  return (
    <Button appearance={appearance} size={size}>
      Button
    </Button>
  );
}

#
Appearance

Use the appearance prop to select between the different button appearances.

Appearance

import type { ComponentPropsWithRef } from "react";
 
import { Button } from "@optiaxiom/react";
 
export function App({
  appearance = "default",
}: Pick<ComponentPropsWithRef<typeof Button>, "appearance">) {
  return <Button appearance={appearance}>Delete</Button>;
}

#
Different sizes

Use the size prop to modify the size of the button.

import { Button, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex>
      <Flex flexDirection="row">
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
      </Flex>
 
      <Flex flexDirection="row">
        <Button appearance="primary" size="sm">
          Small
        </Button>
        <Button appearance="primary" size="md">
          Medium
        </Button>
        <Button appearance="primary" size="lg">
          Large
        </Button>
      </Flex>
    </Flex>
  );
}

#
Disabled state

Set the disabled prop to true to disable buttons and prevent any interactions.

For accessibility please make sure to include text that explains why the button is disabled or use a tooltip.

import { Button, Flex, Tooltip } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Tooltip content="Disabled button demo">
        <Button appearance="primary" disabled>
          Disabled
        </Button>
      </Tooltip>
 
      <Tooltip content="Disabled button demo">
        <Button disabled>Disabled</Button>
      </Tooltip>
 
      <Tooltip content="Disabled button demo">
        <Button appearance="subtle" disabled>
          Disabled
        </Button>
      </Tooltip>
    </Flex>
  );
}

#
Icons

#
Left and right icons

Use the icon prop to add icons to a button. Icons are placed to the left by default but that can be configured using the iconPosition prop.

Appearance

Icon position

import type { ComponentPropsWithRef } from "react";
 
import { Button } from "@optiaxiom/react";
import { IconTrash } from "@tabler/icons-react";
 
export function App({
  appearance = "default",
  iconPosition = "start",
}: Pick<ComponentPropsWithRef<typeof Button>, "appearance" | "iconPosition">) {
  return (
    <Button
      appearance={appearance}
      icon={<IconTrash />}
      iconPosition={iconPosition}
    >
      Delete
    </Button>
  );
}

#
Icon button

Use the icon prop and omit the children to display an icon only button.

For accessibility please make sure to always include an aria-label prop for screen readers and optionally use tooltips to visually denote the button’s intent.

import { Button, Flex, Tooltip } from "@optiaxiom/react";
import { IconPencil, IconTrash } from "@tabler/icons-react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Button
        appearance="subtle"
        aria-label="Edit item"
        icon={<IconPencil />}
      />
 
      <Tooltip content="Remove item">
        <Button
          appearance="subtle"
          aria-label="Remove item"
          icon={<IconTrash />}
        />
      </Tooltip>
    </Flex>
  );
}

#
Groups

#
Grouping buttons

Use the <ButtonGroup /> component to group related buttons together.

import { Button, ButtonGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <ButtonGroup>
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
    </ButtonGroup>
  );
}

#
Links

#
Button as links

Set asChild to true and pass an <a> element as the child to render buttons as links.

Sample Link

import { Button } from "@optiaxiom/react";
 
export function App() {
  return (
    <Button asChild>
      <a href="./props">Sample Link</a>
    </Button>
  );
}

#
Disabled button links

Make sure to prevent interactions manually using event.preventDefault() since <a> elements do not support the disabled prop.

Alternatively you can use our Link component which supports the disabled prop.

Disabled Link

import { Button, Link, Tooltip } from "@optiaxiom/react";
 
export function App() {
  return (
    <Tooltip content="Disabled button link demo">
      <Button asChild disabled>
        <Link href="./props">Disabled Link</Link>
      </Button>
    </Tooltip>
  );
}

#
Loading

#
Loading state

Set the loading prop to true to show a loading spinner and prevent any interactions.

For accessibility please make sure to include text that explains why the button is disabled or use a tooltip.

import { Button, Flex, Switch, Tooltip } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [loading, setLoading] = useState(true);
 
  return (
    <Flex>
      <Flex flexDirection="row">
        <Tooltip content="Loading button demo">
          <Button appearance="primary" loading={loading}>
            Primary
          </Button>
        </Tooltip>
 
        <Tooltip content="Loading button demo">
          <Button loading={loading}>Default</Button>
        </Tooltip>
 
        <Tooltip content="Loading button demo">
          <Button appearance="subtle" loading={loading}>
            Subtle
          </Button>
        </Tooltip>
      </Flex>
 
      <Switch
        checked={loading}
        onCheckedChange={() => setLoading((loading) => !loading)}
      >
        Loading
      </Switch>
    </Flex>
  );
}

#
Examples

#
File upload

We can create a simple file upload button by rendering the button as a label and including a visually hidden file input.

Upload file

import { Button } from "@optiaxiom/react";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { IconCloudUpload } from "@tabler/icons-react";
 
export function App() {
  return (
    <Button asChild icon={<IconCloudUpload />}>
      <label>
        Upload file
        <VisuallyHidden>
          <input type="file" />
        </VisuallyHidden>
      </label>
    </Button>
  );
}

#
Props

#
`Button`

Supports all Box props in addition to its own.

Name	Type
addonAfter	`ReactNode`
addonBefore	`ReactNode`
appearance	`"default" \| "primary" \| "danger" \| "subtle" \| "danger-outline" \| "inverse"` = `"default"`
asChild	`false \| true`
disabled	`false \| true`
icon	`ReactNode`
iconPosition	`"end" \| "start"` = `"start"`
loading	`false \| true`
size	`"sm" \| "md" \| "lg"` = `"md"`

#
`ButtonGroup`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
orientation	`"horizontal" \| "vertical"` = `"horizontal"`

#
Changelog

#
0.1.0

Added component

Text SegmentedControl