QUI VSCode0.7.0

Dialog

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

Examples

Showcase

Dark Modern
import {ReactNode} from "react"


import {
  Button,
  Dialog,
  DialogBody,
  DialogCloseButton,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogStatus,
  DialogTrigger,
} from "@qui/react-vscode"


export default function DialogDemo(): ReactNode {
  return (
    <Dialog>
      <DialogTrigger>
        <Button>Show Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        {({setOpen}) => (
          <>
            <DialogStatus icon="info" />
            <DialogHeader>
              Do you want to save the changes you made to Untitled-1.txt?
            </DialogHeader>
            <DialogCloseButton />


            <DialogBody>
              Your changes will be lost if you don't save them.
            </DialogBody>
            <DialogFooter>
              <Button
                onClick={() => {
                  setOpen(false)
                }}
                variant="secondary"
              >
                Cancel
              </Button>
              <Button onClick={() => setOpen(false)}>Save</Button>
            </DialogFooter>
          </>
        )}
      </DialogContent>
    </Dialog>
  )
}

Forms

Dark Modern
import type {ReactElement} from "react"


import {
  Button,
  Dialog,
  DialogBody,
  DialogCloseButton,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogStatus,
  DialogTrigger,
  Dropdown,
  DropdownInput,
  Field,
  Input,
  ListItem,
  ListLabel,
} from "@qui/react-vscode"


export default function Form(): ReactElement {
  return (
    <Dialog>
      <DialogTrigger>
        <Button>Create new project</Button>
      </DialogTrigger>
      <DialogContent>
        {({setOpen}) => (
          <>
            <DialogStatus icon="info" />
            <DialogHeader>Create New Project</DialogHeader>
            <DialogCloseButton />


            <DialogBody className="w-full">
              <div className="flex flex-col gap-3.5">
                <div className="flex flex-col gap-2">
                  <span>Project Name</span>
                  <Field>
                    <Input
                      className="input-placeholder-fg rounded-[5px]"
                      placeholder="sample"
                    />
                  </Field>
                </div>
                <div className="flex flex-col gap-2">
                  <span>Project Path</span>
                  <Field className="place-content-center">
                    <Input
                      className="input-placeholder-fg rounded-[5px]"
                      placeholder="local/mnt/workspaces/build"
                    />
                  </Field>
                </div>
                <div className="flex flex-col gap-2">
                  <span>SDK Installed Location</span>
                  <Field className="place-content-center">
                    <Input
                      className="input-placeholder-fg rounded-[5px]"
                      placeholder="local/mnt/workspaces/build"
                    />
                  </Field>
                </div>
                {/* TODO: populate dropdown options */}
                <div className="dropdown-height flex flex-col gap-2">
                  <span>Template</span>
                  <Dropdown anchor={<DropdownInput defaultValue="C/C++" />}>
                    <ListItem value="C/C++">
                      <ListLabel>C/C++</ListLabel>
                    </ListItem>
                    <ListItem value="C#">
                      <ListLabel>C#</ListLabel>
                    </ListItem>
                    <ListItem value="Java">
                      <ListLabel>Java</ListLabel>
                    </ListItem>
                  </Dropdown>
                </div>
              </div>
            </DialogBody>


            <DialogFooter>
              <Button onClick={() => setOpen(false)} variant="secondary">
                Cancel
              </Button>
              <Button onClick={() => setOpen(false)} variant="secondary">
                Back
              </Button>
              <Button onClick={() => setOpen(false)}>Add</Button>
            </DialogFooter>
          </>
        )}
      </DialogContent>
    </Dialog>
  )
}

API

Dialog

Name & DescriptionOption(s)Default
children
React children prop.
ReactNode
closeOnEscape
Close the dialog when the escape key is pressed.
boolean
true
closeOnOutsideClick
Close the dialog when the user clicks the content behind it.
boolean
true
defaultOpen
The default value when uncontrolled.
boolean
disableAutoFocus
On open, the dialog focuses the first focusable element by default. Set this input to true to disable this behavior.
boolean
false
disabled
If true, the component is disabled and hidden.
boolean
false
disableScrollLock
If true, disable the scroll lock behavior.
boolean
false
hideBackdrop
If true, the backdrop is hidden.
boolean
false
id
Unique identifier for this dialog
string
onOpenChange
Callback fired when panel visibility changes.
  • isOpenThe updated state. If true, the panel is visible.
  • eventthe DOM event that triggered the change.
(
  isOpen: boolean,
  event?: SyntheticEvent,
) => void
onOutsideClick
Override the outside click event listener. If this returns false, the close action will be prevented.
  • eventthe DOM event associated with the click.
(
  event?: MouseEvent,
) => boolean
open
The controlled state for the component's visibility.
boolean
position
CSS position property of the component. Can be "absolute" or "fixed".
| 'absolute'
| 'fixed'
'absolute'
restoreFocus
If true, focus will be restored to the dialog's trigger element when the dialog is closed.
boolean
true
Type
ReactNode
Description
React children prop.
Type
boolean
Default
true
Description
Close the dialog when the escape key is pressed.
Type
boolean
Default
true
Description
Close the dialog when the user clicks the content behind it.
Type
boolean
Description
The default value when uncontrolled.
Type
boolean
Default
false
Description
On open, the dialog focuses the first focusable element by default. Set this input to true to disable this behavior.
Type
boolean
Default
false
Description
If true, the component is disabled and hidden.
Type
boolean
Default
false
Description
If true, disable the scroll lock behavior.
Type
boolean
Default
false
Description
If true, the backdrop is hidden.
Type
string
Description
Unique identifier for this dialog
Type
(
  isOpen: boolean,
  event?: SyntheticEvent,
) => void
Description
Callback fired when panel visibility changes.
  • isOpenThe updated state. If true, the panel is visible.
  • eventthe DOM event that triggered the change.
Type
(
  event?: MouseEvent,
) => boolean
Description
Override the outside click event listener. If this returns false, the close action will be prevented.
  • eventthe DOM event associated with the click.
Type
boolean
Description
The controlled state for the component's visibility.
Type
| 'absolute'
| 'fixed'
Default
'absolute'
Description
CSS position property of the component. Can be "absolute" or "fixed".
Type
boolean
Default
true
Description
If true, focus will be restored to the dialog's trigger element when the dialog is closed.

DialogContent

Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'section'
children
React children RenderProp.
| ReactNode
| ((props: {
    closeOnEscape?: boolean
    closeOnOutsideClick?: boolean
    disableAutoFocus?: boolean
    disabled?: boolean
    disableScrollLock?: boolean
    hideBackdrop?: boolean
    id?: string
    onOutsideClick?: (
      event?: MouseEvent,
    ) => boolean
    open: boolean
    position?:
      | 'absolute'
      | 'fixed'
    restoreFocus?: boolean
    setOpen: (
      open: boolean,
      ...events: any[]
    ) => void
  }) => ReactNode)
scrollWrapperProps
Props applied to the scrollable element that wraps the child content.
    {
      className?: string
      style?: CSSProperties
    }
    Type
    | ElementType
    | ComponentType
    Default
    'section'
    Description
    The component used for the root node. It can be a React component or element.
    Type
    | ReactNode
    | ((props: {
        closeOnEscape?: boolean
        closeOnOutsideClick?: boolean
        disableAutoFocus?: boolean
        disabled?: boolean
        disableScrollLock?: boolean
        hideBackdrop?: boolean
        id?: string
        onOutsideClick?: (
          event?: MouseEvent,
        ) => boolean
        open: boolean
        position?:
          | 'absolute'
          | 'fixed'
        restoreFocus?: boolean
        setOpen: (
          open: boolean,
          ...events: any[]
        ) => void
      }) => ReactNode)
    Description
    React children RenderProp.
    Type
    {
      className?: string
      style?: CSSProperties
    }
    Description
    Props applied to the scrollable element that wraps the child content.

      DialogStatus

      Name & DescriptionOption(s)Default
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'div'
      children
      React children prop.
      ReactNode
      icon
      Specifies the codicon name to use. If not provided, defaults to the icon associated with the given variant.
      | 'account'
      | 'activate-breakpoints'
      | 'add'
      | 'alert'
      | 'archive'
      | 'array'
      | 'arrow-both'
      | 'arrow-circle-down'
      | 'arrow-circle-left'
      | 'arrow-circle-right'
      | 'arrow-circle-up'
      | 'arrow-down'
      | 'arrow-left'
      | 'arrow-right'
      | 'arrow-small-down'
      | 'arrow-small-left'
      | 'arrow-small-right'
      | 'arrow-small-up'
      | 'arrow-swap'
      | 'arrow-up'
      | 'attach'
      | 'azure'
      | 'azure-devops'
      | 'beaker'
      | 'beaker-stop'
      | 'bell'
      | 'bell-dot'
      | 'bell-slash'
      | 'bell-slash-dot'
      | 'blank'
      | 'bold'
      | 'book'
      | 'bookmark'
      | 'bracket'
      | 'bracket-dot'
      | 'bracket-error'
      | 'briefcase'
      | 'broadcast'
      | 'browser'
      | 'bug'
      | 'calendar'
      | 'call-incoming'
      | 'call-outgoing'
      | 'case-sensitive'
      | 'check'
      | 'check-all'
      | 'checklist'
      | 'chevron-down'
      | 'chevron-left'
      | 'chevron-right'
      | 'chevron-up'
      | 'chip'
      | 'chrome-close'
      | 'chrome-maximize'
      | 'chrome-minimize'
      | 'chrome-restore'
      | 'circle'
      | 'circle-filled'
      | 'circle-large'
      | 'circle-large-filled'
      | 'circle-large-outline'
      | 'circle-outline'
      | 'circle-slash'
      | 'circle-small'
      | 'circle-small-filled'
      | 'circuit-board'
      | 'clear-all'
      | 'clippy'
      | 'clock'
      | 'clone'
      | 'close'
      | 'close-all'
      | 'close-dirty'
      | 'cloud'
      | 'cloud-download'
      | 'cloud-upload'
      | 'code'
      | 'code-oss'
      | 'code-review'
      | 'coffee'
      | 'collapse-all'
      | 'color-mode'
      | 'combine'
      | 'comment'
      | 'comment-add'
      | 'comment-discussion'
      | 'comment-draft'
      | 'comment-unresolved'
      | 'compare-changes'
      | 'compass'
      | 'compass-active'
      | 'compass-dot'
      | 'console'
      | 'copilot'
      | 'copilot-large'
      | 'copilot-warning'
      | 'copilot-warning-large'
      | 'copy'
      | 'coverage'
      | 'credit-card'
      | 'dash'
      | 'dashboard'
      | 'database'
      | 'debug'
      | 'debug-all'
      | 'debug-alt'
      | 'debug-alt-small'
      | 'debug-breakpoint'
      | 'debug-breakpoint-conditional'
      | 'debug-breakpoint-conditional-disabled'
      | 'debug-breakpoint-conditional-unverified'
      | 'debug-breakpoint-data'
      | 'debug-breakpoint-data-disabled'
      | 'debug-breakpoint-data-unverified'
      | 'debug-breakpoint-disabled'
      | 'debug-breakpoint-function'
      | 'debug-breakpoint-function-disabled'
      | 'debug-breakpoint-function-unverified'
      | 'debug-breakpoint-log'
      | 'debug-breakpoint-log-disabled'
      | 'debug-breakpoint-log-unverified'
      | 'debug-breakpoint-unsupported'
      | 'debug-breakpoint-unverified'
      | 'debug-console'
      | 'debug-continue'
      | 'debug-continue-small'
      | 'debug-coverage'
      | 'debug-disconnect'
      | 'debug-hint'
      | 'debug-line-by-line'
      | 'debug-pause'
      | 'debug-rerun'
      | 'debug-restart'
      | 'debug-restart-frame'
      | 'debug-reverse-continue'
      | 'debug-stackframe'
      | 'debug-stackframe-active'
      | 'debug-stackframe-dot'
      | 'debug-stackframe-focused'
      | 'debug-start'
      | 'debug-step-back'
      | 'debug-step-into'
      | 'debug-step-out'
      | 'debug-step-over'
      | 'debug-stop'
      | 'desktop-download'
      | 'device-camera'
      | 'device-camera-video'
      | 'device-desktop'
      | 'device-mobile'
      | 'diff'
      | 'diff-added'
      | 'diff-ignored'
      | 'diff-modified'
      | 'diff-multiple'
      | 'diff-removed'
      | 'diff-renamed'
      | 'diff-sidebyside'
      | 'diff-single'
      | 'discard'
      | 'edit'
      | 'edit-session'
      | 'editor-layout'
      | 'ellipsis'
      | 'empty-window'
      | 'error'
      | 'error-small'
      | 'exclude'
      | 'expand-all'
      | 'export'
      | 'extensions'
      | 'eye'
      | 'eye-closed'
      | 'eye-unwatch'
      | 'eye-watch'
      | 'feedback'
      | 'file'
      | 'file-add'
      | 'file-binary'
      | 'file-code'
      | 'file-directory'
      | 'file-directory-create'
      | 'file-media'
      | 'file-pdf'
      | 'file-submodule'
      | 'file-symlink-directory'
      | 'file-symlink-file'
      | 'file-text'
      | 'file-zip'
      | 'files'
      | 'filter'
      | 'filter-filled'
      | 'flame'
      | 'fold'
      | 'fold-down'
      | 'fold-horizontal'
      | 'fold-horizontal-filled'
      | 'fold-up'
      | 'fold-vertical'
      | 'fold-vertical-filled'
      | 'folder'
      | 'folder-active'
      | 'folder-library'
      | 'folder-opened'
      | 'game'
      | 'gather'
      | 'gear'
      | 'gift'
      | 'gist'
      | 'gist-fork'
      | 'gist-new'
      | 'gist-private'
      | 'gist-secret'
      | 'git-branch'
      | 'git-branch-create'
      | 'git-branch-delete'
      | 'git-commit'
      | 'git-compare'
      | 'git-fork-private'
      | 'git-merge'
      | 'git-pull-request'
      | 'git-pull-request-abandoned'
      | 'git-pull-request-assignee'
      | 'git-pull-request-closed'
      | 'git-pull-request-create'
      | 'git-pull-request-draft'
      | 'git-pull-request-go-to-changes'
      | 'git-pull-request-label'
      | 'git-pull-request-milestone'
      | 'git-pull-request-new-changes'
      | 'git-pull-request-reviewer'
      | 'git-stash'
      | 'git-stash-apply'
      | 'git-stash-pop'
      | 'github'
      | 'github-action'
      | 'github-alt'
      | 'github-inverted'
      | 'github-project'
      | 'globe'
      | 'go-to-editing-session'
      | 'go-to-file'
      | 'go-to-search'
      | 'grabber'
      | 'graph'
      | 'graph-left'
      | 'graph-line'
      | 'graph-scatter'
      | 'gripper'
      | 'group-by-ref-type'
      | 'heart'
      | 'heart-filled'
      | 'history'
      | 'home'
      | 'horizontal-rule'
      | 'hubot'
      | 'inbox'
      | 'indent'
      | 'info'
      | 'insert'
      | 'inspect'
      | 'issue-closed'
      | 'issue-draft'
      | 'issue-opened'
      | 'issue-reopened'
      | 'issues'
      | 'italic'
      | 'jersey'
      | 'json'
      | 'kebab-horizontal'
      | 'kebab-vertical'
      | 'key'
      | 'keyboard'
      | 'law'
      | 'layers'
      | 'layers-active'
      | 'layers-dot'
      | 'layout'
      | 'layout-activitybar-left'
      | 'layout-activitybar-right'
      | 'layout-centered'
      | 'layout-menubar'
      | 'layout-panel'
      | 'layout-panel-center'
      | 'layout-panel-justify'
      | 'layout-panel-left'
      | 'layout-panel-off'
      | 'layout-panel-right'
      | 'layout-sidebar-left'
      | 'layout-sidebar-left-off'
      | 'layout-sidebar-right'
      | 'layout-sidebar-right-off'
      | 'layout-statusbar'
      | 'library'
      | 'light-bulb'
      | 'lightbulb'
      | 'lightbulb-autofix'
      | 'lightbulb-sparkle'
      | 'link'
      | 'link-external'
      | 'list-filter'
      | 'list-flat'
      | 'list-ordered'
      | 'list-selection'
      | 'list-tree'
      | 'list-unordered'
      | 'live-share'
      | 'loading'
      | 'location'
      | 'lock'
      | 'lock-small'
      | 'log-in'
      | 'log-out'
      | 'logo-github'
      | 'magnet'
      | 'mail'
      | 'mail-read'
      | 'mail-reply'
      | 'map'
      | 'map-filled'
      | 'map-horizontal'
      | 'map-horizontal-filled'
      | 'map-vertical'
      | 'map-vertical-filled'
      | 'mark-github'
      | 'markdown'
      | 'megaphone'
      | 'mention'
      | 'menu'
      | 'merge'
      | 'mic'
      | 'mic-filled'
      | 'microscope'
      | 'milestone'
      | 'mirror'
      | 'mirror-private'
      | 'mirror-public'
      | 'more'
      | 'mortar-board'
      | 'move'
      | 'multiple-windows'
      | 'music'
      | 'mute'
      | 'new-file'
      | 'new-folder'
      | 'newline'
      | 'no-newline'
      | 'note'
      | 'notebook'
      | 'notebook-template'
      | 'octoface'
      | 'open-preview'
      | 'organization'
      | 'organization-filled'
      | 'organization-outline'
      | 'output'
      | 'package'
      | 'paintcan'
      | 'pass'
      | 'pass-filled'
      | 'pencil'
      | 'percentage'
      | 'person'
      | 'person-add'
      | 'person-filled'
      | 'person-follow'
      | 'person-outline'
      | 'piano'
      | 'pie-chart'
      | 'pin'
      | 'pinned'
      | 'pinned-dirty'
      | 'play'
      | 'play-circle'
      | 'plug'
      | 'plus'
      | 'preserve-case'
      | 'preview'
      | 'primitive-dot'
      | 'primitive-square'
      | 'project'
      | 'pulse'
      | 'python'
      | 'question'
      | 'quote'
      | 'radio-tower'
      | 'reactions'
      | 'record'
      | 'record-keys'
      | 'record-small'
      | 'redo'
      | 'references'
      | 'refresh'
      | 'regex'
      | 'remote'
      | 'remote-explorer'
      | 'remove'
      | 'remove-close'
      | 'repl'
      | 'replace'
      | 'replace-all'
      | 'reply'
      | 'repo'
      | 'repo-clone'
      | 'repo-create'
      | 'repo-delete'
      | 'repo-fetch'
      | 'repo-force-push'
      | 'repo-forked'
      | 'repo-pull'
      | 'repo-push'
      | 'repo-sync'
      | 'report'
      | 'request-changes'
      | 'robot'
      | 'rocket'
      | 'root-folder'
      | 'root-folder-opened'
      | 'rss'
      | 'ruby'
      | 'run'
      | 'run-above'
      | 'run-all'
      | 'run-all-coverage'
      | 'run-below'
      | 'run-coverage'
      | 'run-errors'
      | 'save'
      | 'save-all'
      | 'save-as'
      | 'screen-full'
      | 'screen-normal'
      | 'search'
      | 'search-fuzzy'
      | 'search-save'
      | 'search-stop'
      | 'selection'
      | 'send'
      | 'server'
      | 'server-environment'
      | 'server-process'
      | 'settings'
      | 'settings-gear'
      | 'share'
      | 'shield'
      | 'sign-in'
      | 'sign-out'
      | 'smiley'
      | 'snake'
      | 'sort-percentage'
      | 'sort-precedence'
      | 'source-control'
      | 'sparkle'
      | 'sparkle-filled'
      | 'split-horizontal'
      | 'split-vertical'
      | 'squirrel'
      | 'star'
      | 'star-add'
      | 'star-delete'
      | 'star-empty'
      | 'star-full'
      | 'star-half'
      | 'stop'
      | 'stop-circle'
      | 'surround-with'
      | 'symbol-array'
      | 'symbol-boolean'
      | 'symbol-class'
      | 'symbol-color'
      | 'symbol-constant'
      | 'symbol-constructor'
      | 'symbol-enum'
      | 'symbol-enum-member'
      | 'symbol-event'
      | 'symbol-field'
      | 'symbol-file'
      | 'symbol-folder'
      | 'symbol-function'
      | 'symbol-interface'
      | 'symbol-key'
      | 'symbol-keyword'
      | 'symbol-method'
      | 'symbol-misc'
      | 'symbol-module'
      | 'symbol-namespace'
      | 'symbol-null'
      | 'symbol-number'
      | 'symbol-numeric'
      | 'symbol-object'
      | 'symbol-operator'
      | 'symbol-package'
      | 'symbol-parameter'
      | 'symbol-property'
      | 'symbol-reference'
      | 'symbol-ruler'
      | 'symbol-snippet'
      | 'symbol-string'
      | 'symbol-struct'
      | 'symbol-structure'
      | 'symbol-text'
      | 'symbol-type-parameter'
      | 'symbol-unit'
      | 'symbol-value'
      | 'symbol-variable'
      | 'sync'
      | 'sync-ignored'
      | 'table'
      | 'tag'
      | 'tag-add'
      | 'tag-remove'
      | 'target'
      | 'tasklist'
      | 'telescope'
      | 'terminal'
      | 'terminal-bash'
      | 'terminal-cmd'
      | 'terminal-debian'
      | 'terminal-decoration-error'
      | 'terminal-decoration-incomplete'
      | 'terminal-decoration-mark'
      | 'terminal-decoration-success'
      | 'terminal-linux'
      | 'terminal-powershell'
      | 'terminal-tmux'
      | 'terminal-ubuntu'
      | 'text-size'
      | 'three-bars'
      | 'thumbsdown'
      | 'thumbsdown-filled'
      | 'thumbsup'
      | 'thumbsup-filled'
      | 'tools'
      | 'trash'
      | 'trashcan'
      | 'triangle-down'
      | 'triangle-left'
      | 'triangle-right'
      | 'triangle-up'
      | 'twitter'
      | 'type-hierarchy'
      | 'type-hierarchy-sub'
      | 'type-hierarchy-super'
      | 'unfold'
      | 'ungroup-by-ref-type'
      | 'unlock'
      | 'unmute'
      | 'unverified'
      | 'variable'
      | 'variable-group'
      | 'verified'
      | 'verified-filled'
      | 'versions'
      | 'vm'
      | 'vm-active'
      | 'vm-connect'
      | 'vm-outline'
      | 'vm-running'
      | 'vr'
      | 'vscode'
      | 'vscode-insiders'
      | 'wand'
      | 'warning'
      | 'watch'
      | 'whitespace'
      | 'whole-word'
      | 'window'
      | 'word-wrap'
      | 'workspace-trusted'
      | 'workspace-unknown'
      | 'workspace-untrusted'
      | 'wrench'
      | 'wrench-subaction'
      | 'x'
      | 'zap'
      | 'zoom-in'
      | 'zoom-out'
      size
      Icon size in pixels.
      number
      48
      variant
      The style of the status indicator.
      | 'info'
      | 'warning'
      | 'error'
      'info'
      Type
      | ElementType
      | ComponentType
      Default
      'div'
      Description
      The component used for the root node. It can be a React component or element.
      Type
      ReactNode
      Description
      React children prop.
      Type
      | 'account'
      | 'activate-breakpoints'
      | 'add'
      | 'alert'
      | 'archive'
      | 'array'
      | 'arrow-both'
      | 'arrow-circle-down'
      | 'arrow-circle-left'
      | 'arrow-circle-right'
      | 'arrow-circle-up'
      | 'arrow-down'
      | 'arrow-left'
      | 'arrow-right'
      | 'arrow-small-down'
      | 'arrow-small-left'
      | 'arrow-small-right'
      | 'arrow-small-up'
      | 'arrow-swap'
      | 'arrow-up'
      | 'attach'
      | 'azure'
      | 'azure-devops'
      | 'beaker'
      | 'beaker-stop'
      | 'bell'
      | 'bell-dot'
      | 'bell-slash'
      | 'bell-slash-dot'
      | 'blank'
      | 'bold'
      | 'book'
      | 'bookmark'
      | 'bracket'
      | 'bracket-dot'
      | 'bracket-error'
      | 'briefcase'
      | 'broadcast'
      | 'browser'
      | 'bug'
      | 'calendar'
      | 'call-incoming'
      | 'call-outgoing'
      | 'case-sensitive'
      | 'check'
      | 'check-all'
      | 'checklist'
      | 'chevron-down'
      | 'chevron-left'
      | 'chevron-right'
      | 'chevron-up'
      | 'chip'
      | 'chrome-close'
      | 'chrome-maximize'
      | 'chrome-minimize'
      | 'chrome-restore'
      | 'circle'
      | 'circle-filled'
      | 'circle-large'
      | 'circle-large-filled'
      | 'circle-large-outline'
      | 'circle-outline'
      | 'circle-slash'
      | 'circle-small'
      | 'circle-small-filled'
      | 'circuit-board'
      | 'clear-all'
      | 'clippy'
      | 'clock'
      | 'clone'
      | 'close'
      | 'close-all'
      | 'close-dirty'
      | 'cloud'
      | 'cloud-download'
      | 'cloud-upload'
      | 'code'
      | 'code-oss'
      | 'code-review'
      | 'coffee'
      | 'collapse-all'
      | 'color-mode'
      | 'combine'
      | 'comment'
      | 'comment-add'
      | 'comment-discussion'
      | 'comment-draft'
      | 'comment-unresolved'
      | 'compare-changes'
      | 'compass'
      | 'compass-active'
      | 'compass-dot'
      | 'console'
      | 'copilot'
      | 'copilot-large'
      | 'copilot-warning'
      | 'copilot-warning-large'
      | 'copy'
      | 'coverage'
      | 'credit-card'
      | 'dash'
      | 'dashboard'
      | 'database'
      | 'debug'
      | 'debug-all'
      | 'debug-alt'
      | 'debug-alt-small'
      | 'debug-breakpoint'
      | 'debug-breakpoint-conditional'
      | 'debug-breakpoint-conditional-disabled'
      | 'debug-breakpoint-conditional-unverified'
      | 'debug-breakpoint-data'
      | 'debug-breakpoint-data-disabled'
      | 'debug-breakpoint-data-unverified'
      | 'debug-breakpoint-disabled'
      | 'debug-breakpoint-function'
      | 'debug-breakpoint-function-disabled'
      | 'debug-breakpoint-function-unverified'
      | 'debug-breakpoint-log'
      | 'debug-breakpoint-log-disabled'
      | 'debug-breakpoint-log-unverified'
      | 'debug-breakpoint-unsupported'
      | 'debug-breakpoint-unverified'
      | 'debug-console'
      | 'debug-continue'
      | 'debug-continue-small'
      | 'debug-coverage'
      | 'debug-disconnect'
      | 'debug-hint'
      | 'debug-line-by-line'
      | 'debug-pause'
      | 'debug-rerun'
      | 'debug-restart'
      | 'debug-restart-frame'
      | 'debug-reverse-continue'
      | 'debug-stackframe'
      | 'debug-stackframe-active'
      | 'debug-stackframe-dot'
      | 'debug-stackframe-focused'
      | 'debug-start'
      | 'debug-step-back'
      | 'debug-step-into'
      | 'debug-step-out'
      | 'debug-step-over'
      | 'debug-stop'
      | 'desktop-download'
      | 'device-camera'
      | 'device-camera-video'
      | 'device-desktop'
      | 'device-mobile'
      | 'diff'
      | 'diff-added'
      | 'diff-ignored'
      | 'diff-modified'
      | 'diff-multiple'
      | 'diff-removed'
      | 'diff-renamed'
      | 'diff-sidebyside'
      | 'diff-single'
      | 'discard'
      | 'edit'
      | 'edit-session'
      | 'editor-layout'
      | 'ellipsis'
      | 'empty-window'
      | 'error'
      | 'error-small'
      | 'exclude'
      | 'expand-all'
      | 'export'
      | 'extensions'
      | 'eye'
      | 'eye-closed'
      | 'eye-unwatch'
      | 'eye-watch'
      | 'feedback'
      | 'file'
      | 'file-add'
      | 'file-binary'
      | 'file-code'
      | 'file-directory'
      | 'file-directory-create'
      | 'file-media'
      | 'file-pdf'
      | 'file-submodule'
      | 'file-symlink-directory'
      | 'file-symlink-file'
      | 'file-text'
      | 'file-zip'
      | 'files'
      | 'filter'
      | 'filter-filled'
      | 'flame'
      | 'fold'
      | 'fold-down'
      | 'fold-horizontal'
      | 'fold-horizontal-filled'
      | 'fold-up'
      | 'fold-vertical'
      | 'fold-vertical-filled'
      | 'folder'
      | 'folder-active'
      | 'folder-library'
      | 'folder-opened'
      | 'game'
      | 'gather'
      | 'gear'
      | 'gift'
      | 'gist'
      | 'gist-fork'
      | 'gist-new'
      | 'gist-private'
      | 'gist-secret'
      | 'git-branch'
      | 'git-branch-create'
      | 'git-branch-delete'
      | 'git-commit'
      | 'git-compare'
      | 'git-fork-private'
      | 'git-merge'
      | 'git-pull-request'
      | 'git-pull-request-abandoned'
      | 'git-pull-request-assignee'
      | 'git-pull-request-closed'
      | 'git-pull-request-create'
      | 'git-pull-request-draft'
      | 'git-pull-request-go-to-changes'
      | 'git-pull-request-label'
      | 'git-pull-request-milestone'
      | 'git-pull-request-new-changes'
      | 'git-pull-request-reviewer'
      | 'git-stash'
      | 'git-stash-apply'
      | 'git-stash-pop'
      | 'github'
      | 'github-action'
      | 'github-alt'
      | 'github-inverted'
      | 'github-project'
      | 'globe'
      | 'go-to-editing-session'
      | 'go-to-file'
      | 'go-to-search'
      | 'grabber'
      | 'graph'
      | 'graph-left'
      | 'graph-line'
      | 'graph-scatter'
      | 'gripper'
      | 'group-by-ref-type'
      | 'heart'
      | 'heart-filled'
      | 'history'
      | 'home'
      | 'horizontal-rule'
      | 'hubot'
      | 'inbox'
      | 'indent'
      | 'info'
      | 'insert'
      | 'inspect'
      | 'issue-closed'
      | 'issue-draft'
      | 'issue-opened'
      | 'issue-reopened'
      | 'issues'
      | 'italic'
      | 'jersey'
      | 'json'
      | 'kebab-horizontal'
      | 'kebab-vertical'
      | 'key'
      | 'keyboard'
      | 'law'
      | 'layers'
      | 'layers-active'
      | 'layers-dot'
      | 'layout'
      | 'layout-activitybar-left'
      | 'layout-activitybar-right'
      | 'layout-centered'
      | 'layout-menubar'
      | 'layout-panel'
      | 'layout-panel-center'
      | 'layout-panel-justify'
      | 'layout-panel-left'
      | 'layout-panel-off'
      | 'layout-panel-right'
      | 'layout-sidebar-left'
      | 'layout-sidebar-left-off'
      | 'layout-sidebar-right'
      | 'layout-sidebar-right-off'
      | 'layout-statusbar'
      | 'library'
      | 'light-bulb'
      | 'lightbulb'
      | 'lightbulb-autofix'
      | 'lightbulb-sparkle'
      | 'link'
      | 'link-external'
      | 'list-filter'
      | 'list-flat'
      | 'list-ordered'
      | 'list-selection'
      | 'list-tree'
      | 'list-unordered'
      | 'live-share'
      | 'loading'
      | 'location'
      | 'lock'
      | 'lock-small'
      | 'log-in'
      | 'log-out'
      | 'logo-github'
      | 'magnet'
      | 'mail'
      | 'mail-read'
      | 'mail-reply'
      | 'map'
      | 'map-filled'
      | 'map-horizontal'
      | 'map-horizontal-filled'
      | 'map-vertical'
      | 'map-vertical-filled'
      | 'mark-github'
      | 'markdown'
      | 'megaphone'
      | 'mention'
      | 'menu'
      | 'merge'
      | 'mic'
      | 'mic-filled'
      | 'microscope'
      | 'milestone'
      | 'mirror'
      | 'mirror-private'
      | 'mirror-public'
      | 'more'
      | 'mortar-board'
      | 'move'
      | 'multiple-windows'
      | 'music'
      | 'mute'
      | 'new-file'
      | 'new-folder'
      | 'newline'
      | 'no-newline'
      | 'note'
      | 'notebook'
      | 'notebook-template'
      | 'octoface'
      | 'open-preview'
      | 'organization'
      | 'organization-filled'
      | 'organization-outline'
      | 'output'
      | 'package'
      | 'paintcan'
      | 'pass'
      | 'pass-filled'
      | 'pencil'
      | 'percentage'
      | 'person'
      | 'person-add'
      | 'person-filled'
      | 'person-follow'
      | 'person-outline'
      | 'piano'
      | 'pie-chart'
      | 'pin'
      | 'pinned'
      | 'pinned-dirty'
      | 'play'
      | 'play-circle'
      | 'plug'
      | 'plus'
      | 'preserve-case'
      | 'preview'
      | 'primitive-dot'
      | 'primitive-square'
      | 'project'
      | 'pulse'
      | 'python'
      | 'question'
      | 'quote'
      | 'radio-tower'
      | 'reactions'
      | 'record'
      | 'record-keys'
      | 'record-small'
      | 'redo'
      | 'references'
      | 'refresh'
      | 'regex'
      | 'remote'
      | 'remote-explorer'
      | 'remove'
      | 'remove-close'
      | 'repl'
      | 'replace'
      | 'replace-all'
      | 'reply'
      | 'repo'
      | 'repo-clone'
      | 'repo-create'
      | 'repo-delete'
      | 'repo-fetch'
      | 'repo-force-push'
      | 'repo-forked'
      | 'repo-pull'
      | 'repo-push'
      | 'repo-sync'
      | 'report'
      | 'request-changes'
      | 'robot'
      | 'rocket'
      | 'root-folder'
      | 'root-folder-opened'
      | 'rss'
      | 'ruby'
      | 'run'
      | 'run-above'
      | 'run-all'
      | 'run-all-coverage'
      | 'run-below'
      | 'run-coverage'
      | 'run-errors'
      | 'save'
      | 'save-all'
      | 'save-as'
      | 'screen-full'
      | 'screen-normal'
      | 'search'
      | 'search-fuzzy'
      | 'search-save'
      | 'search-stop'
      | 'selection'
      | 'send'
      | 'server'
      | 'server-environment'
      | 'server-process'
      | 'settings'
      | 'settings-gear'
      | 'share'
      | 'shield'
      | 'sign-in'
      | 'sign-out'
      | 'smiley'
      | 'snake'
      | 'sort-percentage'
      | 'sort-precedence'
      | 'source-control'
      | 'sparkle'
      | 'sparkle-filled'
      | 'split-horizontal'
      | 'split-vertical'
      | 'squirrel'
      | 'star'
      | 'star-add'
      | 'star-delete'
      | 'star-empty'
      | 'star-full'
      | 'star-half'
      | 'stop'
      | 'stop-circle'
      | 'surround-with'
      | 'symbol-array'
      | 'symbol-boolean'
      | 'symbol-class'
      | 'symbol-color'
      | 'symbol-constant'
      | 'symbol-constructor'
      | 'symbol-enum'
      | 'symbol-enum-member'
      | 'symbol-event'
      | 'symbol-field'
      | 'symbol-file'
      | 'symbol-folder'
      | 'symbol-function'
      | 'symbol-interface'
      | 'symbol-key'
      | 'symbol-keyword'
      | 'symbol-method'
      | 'symbol-misc'
      | 'symbol-module'
      | 'symbol-namespace'
      | 'symbol-null'
      | 'symbol-number'
      | 'symbol-numeric'
      | 'symbol-object'
      | 'symbol-operator'
      | 'symbol-package'
      | 'symbol-parameter'
      | 'symbol-property'
      | 'symbol-reference'
      | 'symbol-ruler'
      | 'symbol-snippet'
      | 'symbol-string'
      | 'symbol-struct'
      | 'symbol-structure'
      | 'symbol-text'
      | 'symbol-type-parameter'
      | 'symbol-unit'
      | 'symbol-value'
      | 'symbol-variable'
      | 'sync'
      | 'sync-ignored'
      | 'table'
      | 'tag'
      | 'tag-add'
      | 'tag-remove'
      | 'target'
      | 'tasklist'
      | 'telescope'
      | 'terminal'
      | 'terminal-bash'
      | 'terminal-cmd'
      | 'terminal-debian'
      | 'terminal-decoration-error'
      | 'terminal-decoration-incomplete'
      | 'terminal-decoration-mark'
      | 'terminal-decoration-success'
      | 'terminal-linux'
      | 'terminal-powershell'
      | 'terminal-tmux'
      | 'terminal-ubuntu'
      | 'text-size'
      | 'three-bars'
      | 'thumbsdown'
      | 'thumbsdown-filled'
      | 'thumbsup'
      | 'thumbsup-filled'
      | 'tools'
      | 'trash'
      | 'trashcan'
      | 'triangle-down'
      | 'triangle-left'
      | 'triangle-right'
      | 'triangle-up'
      | 'twitter'
      | 'type-hierarchy'
      | 'type-hierarchy-sub'
      | 'type-hierarchy-super'
      | 'unfold'
      | 'ungroup-by-ref-type'
      | 'unlock'
      | 'unmute'
      | 'unverified'
      | 'variable'
      | 'variable-group'
      | 'verified'
      | 'verified-filled'
      | 'versions'
      | 'vm'
      | 'vm-active'
      | 'vm-connect'
      | 'vm-outline'
      | 'vm-running'
      | 'vr'
      | 'vscode'
      | 'vscode-insiders'
      | 'wand'
      | 'warning'
      | 'watch'
      | 'whitespace'
      | 'whole-word'
      | 'window'
      | 'word-wrap'
      | 'workspace-trusted'
      | 'workspace-unknown'
      | 'workspace-untrusted'
      | 'wrench'
      | 'wrench-subaction'
      | 'x'
      | 'zap'
      | 'zoom-in'
      | 'zoom-out'
      Description
      Specifies the codicon name to use. If not provided, defaults to the icon associated with the given variant.
      Type
      number
      Default
      48
      Description
      Icon size in pixels.
      Type
      | 'info'
      | 'warning'
      | 'error'
      Default
      'info'
      Description
      The style of the status indicator.

      DialogHeader

      Name & DescriptionOption(s)Default
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'h2'
      children
      React children prop.
      ReactNode
      id
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
      string
      Type
      | ElementType
      | ComponentType
      Default
      'h2'
      Description
      The component used for the root node. It can be a React component or element.
      Type
      ReactNode
      Description
      React children prop.
      Type
      string
      Description
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

      DialogBody

      Name & DescriptionOption(s)Default
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'div'
      children
      React children prop.
      ReactNode
      id
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
      string
      Type
      | ElementType
      | ComponentType
      Default
      'div'
      Description
      The component used for the root node. It can be a React component or element.
      Type
      ReactNode
      Description
      React children prop.
      Type
      string
      Description
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

      DialogFooter

      Name & DescriptionOption(s)Default
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'div'
      children
      React children prop.
      ReactNode
      Type
      | ElementType
      | ComponentType
      Default
      'div'
      Description
      The component used for the root node. It can be a React component or element.
      Type
      ReactNode
      Description
      React children prop.
      Previous
      Checkbox
      Next
      Disclosure
      Examples
      Showcase
      Forms
      API
      Dialog
      DialogContent
      DialogStatus
      DialogHeader
      DialogBody
      DialogFooter
      Copyright © 2025 QUALCOMM incorporated. All rights reserved.