Button

Examples

Variants

Theme:

Dark Modern

import {ReactNode} from "react"

import {Button} from "@qui/react-vscode"

export default function Variants(): ReactNode {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button>Button</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

Icons

Theme:

Dark Modern

import {ReactNode} from "react"

import {Button} from "@qui/react-vscode"

export default function Icons(): ReactNode {
  return (
    <div className="grid justify-center gap-4">
      <Button endIcon="chevron-right">Button</Button>
    </div>
  )
}

Sizes

Theme:

Dark Modern

import type {ReactElement} from "react"

import {Button} from "@qui/react-vscode"

export default function Size(): ReactElement {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button endIcon="plus">Button</Button>
      <Button endIcon="plus" size="sm">
        Button
      </Button>
      <Button endIcon="plus" size="xs">
        Button
      </Button>
    </div>
  )
}

Disabled

Theme:

Dark Modern

import type {ReactElement} from "react"

import {Button} from "@qui/react-vscode"

export default function Disabled(): ReactElement {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button disabled>Button</Button>
      <Button disabled variant="secondary">
        Secondary
      </Button>
      <Button disabled variant="outline">
        Outline
      </Button>
    </div>
  )
}

API

ButtonProps

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'button'
children React children prop.	ReactNode
disabled If `true`, the component will not be interactive and will appear dimmed.	boolean	false
endIcon Icon positioned after the children. If supplied as a `string`, the vscode codicon will be applied. Supply as a `ReactElement` for additional customization.	\| string \| ReactElement
size The size of each button.	\| 'md' \| 'sm' \| 'xs'	'md'
startIcon Icon positioned after the children. If supplied as a `string`, the vscode codicon will be applied. Supply as a `ReactElement` for additional customization.	\| string \| ReactElement
variant The style variant of the button.	\| 'primary' \| 'secondary' \| 'outline'	'primary'

Type

| ElementType
| ComponentType

Default

'button'

Description

The component used for the root node. It can be a React component or element.

children

Type

ReactNode

Description

React children prop.

disabled

Type

boolean

Default

false

Description

If true, the component will not be interactive and will appear dimmed.

endIcon

Type

| string
| ReactElement

Description

Icon positioned after the children. If supplied as a string, the vscode codicon will be applied. Supply as a ReactElement for additional customization.

size

Type

| 'md'
| 'sm'
| 'xs'

Default

'md'

Description

The size of each button.

startIcon

Type

| string
| ReactElement

Description

Icon positioned after the children. If supplied as a string, the vscode codicon will be applied. Supply as a ReactElement for additional customization.

variant

Type

| 'primary'
| 'secondary'
| 'outline'

Default

'primary'

Description

The style variant of the button.

Badge

Catalog Card