Skip to Content
ComponentsButton

Button

Button component is used to trigger actions.

Documentation

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

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

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

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

Use the icon prop to add icons to a button.

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

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

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

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

Set asChild to true and wrap children in an <a> element to render buttons as links.

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

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.

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

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

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

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

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

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

  • Added component
Last updated on