ComponentsButton

Button

Button component is used to trigger actions.

#

Documentation

#

Usage

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 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

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.

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.

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.

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

#

Related

DropdownMenu

Display a dropdown menu.

SegmentedControl

Toggle buttons for switching between different values or views.

ToggleButton

ToggleButton component represents a button that can be toggled on or off.

#

Props

#

Button

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

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" | "inverse"

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

iconOnly

Whether button should have square shape.

false | true

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"

#

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
Breadcrumb ALPHA
Checkbox