button

Renders as <button> by default. Pass href to get an <a> that looks identical. All four variants are shown below.

button({ label: 'Primary',   variant: 'primary'   })
button({ label: 'Secondary', variant: 'secondary' })
button({ label: 'Ghost',     variant: 'ghost'     })
button({ label: 'Danger',    variant: 'danger'    })

button({ label: 'Small',  size: 'sm' })
button({ label: 'Medium', size: 'md' })
button({ label: 'Large',  size: 'lg' })

import { iconDownload, iconPlus, iconArrowRight, iconSend } from '@invisibleloop/pulse/ui'

button({ label: 'Download', icon: iconDownload({ size: 14 }) })
button({ label: 'New item', icon: iconPlus({ size: 14 }),           variant: 'secondary' })
button({ label: 'Continue', iconAfter: iconArrowRight({ size: 14 }) })
button({ label: 'Send',     iconAfter: iconSend({ size: 14 }),      variant: 'ghost' })

Link

button({ label: 'Disabled', disabled: true })
button({ label: 'Link',    href: '/docs'   })
button({ label: 'Submit',  type: 'submit', variant: 'primary' })

Prop	Type	Default
`label`	string	—	Visible text
`variant`	string	primary	primary · secondary · ghost · danger
`size`	string	md	sm · md · lg
`href`	string	—	Renders `<a>` instead of `<button>`
`disabled`	boolean	false
`type`	string	button	button · submit · reset
`icon`	string	—	SVG HTML prepended inside
`iconAfter`	string	—	SVG HTML appended inside
`fullWidth`	boolean	false
`class`	string	—	Extra classes appended to the element
`attrs`	object	{}	Extra HTML attributes (button only)