Button Element
Button element for generating links and buttons with a button-like appearance.
Default
This is the default appearance of the button.
<!-- source -->
<vision-button>Button</vision-button>Families
A button family can be choosen by the family attribute.
Options are: solid, outline, soft, ghost and link.
<!-- source -->
<vision-button title="Not a button" family="outline">Button</vision-button>
<vision-button family="soft">Button</vision-button>
<vision-button family="ghost">Button</vision-button>
<vision-button family="link">Button</vision-button>Variants
A button variant can be choosen by the variant attribute.
Options are: default, 1, 2, 3, error and inversed.
<!-- source -->
<vision-button variant="1">Button</vision-button>
<vision-button variant="2">Button</vision-button>
<vision-button variant="3">Button</vision-button>
<vision-button variant="error">Button</vision-button>
<vision-button variant="inversed">Button</vision-button>Pointer
A button can show a pointer icon by setting the pointer attribute.
<!-- source -->
<vision-button pointer="true" family="outline">Button</vision-button>
<vision-button pointer="true" family="soft">Button</vision-button>
<vision-button pointer="true" family="ghost">Button</vision-button>
<vision-button pointer="true" family="link">Button</vision-button>Accessibility (ARIA)
The following ARIA attributes are supported and will be correctly forwarded to the inner <button> or <a> element.
aria-label
Use when the button has no visible text (icon-only), or when the visible label needs a more descriptive alternative for screen readers.
<!-- source -->
<vision-button family="solid" icon="true" aria-label="Add to favourites">
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24Z"/></svg>
</vision-button>aria-pressed
Use on toggle buttons to indicate whether the button is currently active.
<!-- source -->
<vision-button family="solid" aria-pressed="true">Mute</vision-button>
<vision-button family="solid" aria-pressed="false">Mute</vision-button>aria-expanded
Use on buttons that show or hide another element (e.g. a dropdown or accordion).
<!-- source -->
<vision-button family="solid" aria-expanded="true" aria-controls="panel-id">Show details</vision-button>
<vision-button family="solid" aria-expanded="false" aria-controls="panel-id">Show details</vision-button>aria-controls
References the id of the element the button controls. Used together with aria-expanded or aria-haspopup.
<!-- source -->
<vision-button family="solid" aria-expanded="false" aria-controls="menu-id">Open menu</vision-button>aria-haspopup
Indicates the button opens a popup element such as a menu, listbox or dialog.
<!-- source -->
<vision-button family="solid" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-id">Options</vision-button>aria-disabled
Marks a button as semantically disabled while keeping it focusable. Use instead of disabled when the button should remain reachable by keyboard.
<!-- source -->
<vision-button family="solid" aria-disabled="true">Submit</vision-button>aria-describedby
References the id of an element that provides additional descriptive context for the button.
This will permanently remove the item.
<!-- source -->
<p id="delete-desc">This will permanently remove the item.</p>
<vision-button family="solid" aria-describedby="delete-desc">Delete</vision-button>