Button

Button renders every clickable action in LibreChat, including controls that do not look like buttons, such as a disclosure caret or a copy icon. Pick the variant by what the action does.

Variants

import { Button } from '@librechat/client'

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Default</Button>
      <Button variant="submit">Save</Button>
      <Button variant="outline">Cancel</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Variant	Use it for
`default`	A primary action that opens a dialog or starts a flow
`submit`	Saving or creating: the form's main action
`outline`	Cancel, dismiss, or a secondary action
`destructive`	Deleting or another irreversible action, usually inside a confirmation dialog
`ghost`	Low-emphasis, icon-only, toolbar and row actions
`link`	An inline textual action

Sizes

import { Plus } from 'lucide-react'
import { Button } from '@librechat/client'

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button>Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon" variant="outline" aria-label="Add">
        <Plus className="size-4" aria-hidden="true" />
      </Button>
    </div>
  )
}

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'submit' \| 'outline' \| 'destructive' \| 'ghost' \| 'link' \| ...`	`'default'`	The visual role of the action.
`size`	`'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| ...`	`'default'`	Height and padding. The `icon` sizes are square.
`shape`	`'theme' \| 'round' \| ...`	Unset	The corner radius. Unset, the variant's own radius applies; `theme` and `round` follow the theme's control shape.
`asChild`	`boolean`	`false`	Renders the child element (for example a link) with the button's styles.

Button also accepts every native button attribute.

Accessibility

Give an icon-only button an aria-label; the icon itself should be aria-hidden.
Set type="submit" on a form's main button.
A disabled button keeps its label readable; prefer explaining why an action is unavailable over hiding it.

Key	Action
`Enter` or `Space`	Activates the button

Button

Variants

Sizes

Props

Accessibility

On this page