Guide Components Icons Utilities Layouts
Button Call to Action Theme Toggle Checkbox File Input Input Group Radio Input Select Input Switch Text Input Textarea Avatar Billboard Icon Breadcrumbs Header Pagination Series Nav Sidenav Subnav Tabs Table of Contents Dialog Disclosure Dropdown Accordion Alert Badge Calendar Tile Callout Card CTA Band Empty State Footer Grid Hero Link Hub List Loading Indicator Prose Quote Sponsor Stat Step Indicator Table Timeline

Button

<vox-button> renders an accessible button, or a link styled as a button when href is set.

Variants

Brand Alt Danger Ghost 
<vox-button variant="brand">Brand</vox-button>
<vox-button variant="alt">Alt</vox-button>
<vox-button variant="danger">Danger</vox-button>
<vox-button variant="ghost">Ghost</vox-button>

Sizes

Small Medium Large 
<vox-button size="sm">Small</vox-button>
<vox-button size="md">Medium</vox-button>
<vox-button size="lg">Large</vox-button>
Visit OpenVox 
<vox-button href="https://voxpupuli.org/openvox/" target="_blank">Visit OpenVox</vox-button>

Disabled

Disabled 
<vox-button disabled>Disabled</vox-button>

API

Attribute Type Default Description
variant brand | alt | danger | ghost brand Visual style
size sm | md | lg md Button size
href string — Render as a link
target string — Link target (adds rel="noreferrer" for _blank)
type button | submit | reset button Button type
disabled boolean false Disable the button