Github

Icon Button

Icon buttons trigger actions using a compact icon-only control.

Component variations

Variants

Contains: Solid, Subtle, Outline, Transparent. Solid is default

Size

Contains: Small as sm, medium as md, large as lg. Medium is default

Color Variations

Contains: Primary, Neutral, Error. Primary is default

Roundness

Is a boolean value. True makes the button fully rounded (circular). Otherwise the default roundness will be applied.

Disabled

Is a boolean value. True disables the button. Otherwise the button will be enabled.

Loading

Is a boolean value. True makes the button in the loading state with loading indicator.

Usage Guidelines

Import

Import the icon button component in your module or component:

import-icon-button.ts

Copy code

Basic Implementation

Here is a basic example of using the icon button component:

icon-button-example.html

Copy code

All Available APIs

Here is an example of using the icon button component with all available APIs:

icon-button-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
icon
string
-
Yes
Icon name to display (e.g., "vd-icon-plus")
ariaLabel
string
-
Yes
Accessible label for screen readers
variant
'solid' | 'outline' | 'subtle' | 'transparent'
'solid'
No
Visual style of the button
color
'primary' | 'neutral' | 'error'
'primary'
No
Color token for the button
size
'sm' | 'md' | 'lg'
'md'
No
Size of the button
rounded
boolean
false
No
Whether the button has fully rounded (circular) corners
disabled
boolean
false
No
Whether the button is disabled
loading
boolean
false
No
Whether the button is in loading state

Best Practices

When to Use

  • Use Icon Button when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Icon Button when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Always provide a descriptive ariaLabel for accessibility
  • Use solid variant for primary actions; outline or subtle for secondary actions
  • Prefer neutral color for general actions; use semantic colors for specific actions
  • Use size consistently within a page to maintain visual hierarchy
  • Consider rounded variant for a more modern, friendly appearance
  • Use loading state to provide feedback during async operations
  • Ensure sufficient touch target size on mobile (minimum 44x44px)
  • Choose icons that clearly represent the action being performed
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the icon button features in this section

example.html

Copy code