Button

Button component is used to trigger actions.

#
Documentation

#
Usage

Appearance

Size


"use client";
 
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.


import { Button, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection={["column", "row"]}>
      <Button appearance="primary">Delete</Button>
      <Button appearance="danger">Delete</Button>
      <Button appearance="danger-outline">Delete</Button>
      <Button appearance="default">Delete</Button>
      <Button appearance="subtle">Delete</Button>
    </Flex>
  );
}

#
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

Use the icon prop to add icons to a button.

#
Left and right icons

Icons are placed to the left by default but can be placed to the right using the iconPosition prop.

Appearance

Icon position


"use client";
 
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 only 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>
  );
}

#
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 wrap children in an <a> element 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 state

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

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


"use client";
 
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" disabled={loading} loading={loading}>
            Primary
          </Button>
        </Tooltip>
 
        <Tooltip content="Loading button demo">
          <Button disabled={loading} loading={loading}>
            Default
          </Button>
        </Tooltip>
 
        <Tooltip content="Loading button demo">
          <Button appearance="subtle" disabled={loading} loading={loading}>
            Subtle
          </Button>
        </Tooltip>
      </Flex>
 
      <Switch
        checked={loading}
        onCheckedChange={() => setLoading((loading) => !loading)}
      >
        Loading
      </Switch>
    </Flex>
  );
}

#
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>
  );
}

Prop
`addonAfter` Display content inside the button after `children`. `ReactNode`
`addonBefore` Display content inside the button before `children`. `ReactNode`
`appearance` Control the appearance by selecting between the different button types. `"default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "default-opal" \| "inverse" \| "primary-opal"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`disabled` Whether the button is disabled. `false \| true`
`icon` Display an icon before or after the button content or omit `children` to only show the icon. `ReactNode`
`iconPosition` Control whether to show the icon before or after the button content. `"end" \| "start"` Default: `start`
`loading` Whether to show loading spinner inside the button. `false \| true`
`size` Control the size of the button. `"sm" \| "md" \| "lg"`
`square` Whether button should have square shape. `false \| true`

#
ButtonGroup

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`orientation` The orientation/layout of the buttons inside the group. `"horizontal" \| "vertical"` Default: `horizontal`

#
Changelog

#
0.1.0

Added component