Button

• Docs
• API

Tag name: <vscode-button>

Clickable element that are used to trigger actions.

Properties

autofocusreflects

Name	autofocus
Attribute	autofocus
Type	boolean
Default	false

disabledreflects

Name	disabled
Attribute	disabled
Type	boolean
Default	false

focusedreflects

Name	focused
Attribute	focused
Type	boolean
Default	false

formreadonly

Name	form
Type	HTMLFormElement | null

icon

Name	icon
Attribute	icon
Type	string
Default	''
Description	A Codicon before the label

iconAfter

Name	iconAfter
Attribute	icon-after
Type	string
Default	''
Description	A Codicon after the label

iconAfterSpinreflects

Name	iconAfterSpin
Attribute	icon-after-spin
Type	boolean
Default	false
Description	Spin property for the after icon

iconAfterSpinDurationreflects

Name	iconAfterSpinDuration
Attribute	icon-after-spin-duration
Type	number | undefined
Description	Duration property for the after icon

iconSpinreflects

Name	iconSpin
Attribute	icon-spin
Type	boolean
Default	false
Description	Spin property for the icon

iconSpinDurationreflects

Name	iconSpinDuration
Attribute	icon-spin-duration
Type	number | undefined
Description	Duration property for the icon

namereflects

Name	name
Attribute	name
Type	string | undefined
Default	undefined

secondaryreflects

Name	secondary
Attribute	secondary
Type	boolean
Default	false
Description	Button has a less prominent style.

typereflects

Name	type
Attribute	type
Type	'submit' | 'reset' | 'button'
Default	'button'

value

Name	value
Attribute	value
Type	string
Default	''

versionreadonly

Name	version
Type	string
Description	VSCode Elements version

Events

vsc-clickdeprecated

Name	vsc-click
Type	CustomEvent
Description	Deprecation warning! Please use the standard click event. Dispatched only when button is not in disabled state.

CSS Custom Properties

--vscode-button-background

Name	--vscode-button-background
Default value	#0078d4

--vscode-button-border

Name	--vscode-button-border
Default value	var(--vscode-button-background, rgba(255, 255, 255, 0.07))

--vscode-button-foreground

Name	--vscode-button-foreground
Default value	#ffffff

--vscode-button-hoverBackground

Name	--vscode-button-hoverBackground
Default value	#026ec1

--vscode-button-secondaryBackground

Name	--vscode-button-secondaryBackground
Default value	#313131

--vscode-button-secondaryForeground

Name	--vscode-button-secondaryForeground
Default value	#cccccc

--vscode-button-secondaryHoverBackground

Name	--vscode-button-secondaryHoverBackground
Default value	#3c3c3c

--vscode-focusBorder

Name	--vscode-focusBorder
Default value	#0078d4

--vscode-font-family

Name	--vscode-font-family
Default value	sans-serif
Description	A sans-serif font type depends on the host OS.

--vscode-font-size

Name	--vscode-font-size
Default value	13px

--vscode-font-weight

Name	--vscode-font-weight
Default value	normal