Icon Button

Examples

Variants

Theme:

Dark Modern

import {ReactNode} from "react"

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

export default function Variants(): ReactNode {
  return (
    <div className="flex flex-col gap-4">
      <IconButton icon="link-external" />
      <IconButton icon="link-external" variant="secondary" />
      <IconButton disabled icon="link-external" />
    </div>
  )
}

API

IconButtonProps

Name & Description	Option(s)	Default
icon ^* If supplied as a `string`, the vscode codicon will be applied. Supply as a `ReactElement` for additional customization.	\| string \| ReactElement
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'button'
disabled Controls the component's interactivity. If `true`, the component is rendered non-interactive and visually dimmed to signal its disabled state.	boolean
variant The style variant of the button.	\| 'primary' \| 'secondary' \| 'outline'	'primary'