PushButton

Basic Usage

<script setup>
import { PushButton } from '@vrgl/vergil/components'
</script>

<template>
    <PushButton>Keep it Clean!</PushButton>
</template>

Props

Label

label: string

MiniMarkup

Simple PushButton text content can be specified through the default slot or the label prop. The slot content overrides the label prop.

<PushButton label="Click"/>

Variant

variant: ('solid' | 'soft' | 'subtle') = 'solid'

Outline

outline: (boolean | 'subtle' | 'regular' | 'strong')

only for

soft

and

subtle

variants

The 'regular' and true values are equivalent.

Icon

icon: string

alias:

icon-left

<PushButton label="Rocket" icon="rocket_launch"/>

Icon Right

icon-right: string

<PushButton label="Omega" icon-right="special_character"/>

Squared

squared: boolean

Adding squared sets padding to the same value on all sides.

Theme

theme: theme = 'brand'

Size

size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'

Changing the size mainly changes the font-size and adjusts padding accordingly.

Radius

radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'md'

Spacing

spacing: ('compact' | 'expanded') = ''

Spacing refers to a PushButton's default padding and gap (for a given size). Changing spacing gives either a more compact or spacious look.

Disabled

disabled: boolean

Loading

loading: boolean

API Reference

Props

prop	type	default
label	string	''
variant	'solid' | 'soft' | 'subtle'	'solid'
outline	boolean | 'subtle' | 'regular' | 'strong'
icon	string
iconLeft	string
iconRight	string
squared	boolean
disabled	boolean
loading	boolean
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'
spacing	'' | 'compact' | 'extended'	''

Configuration options

PushButton's configuration options allow to overwrite some PushButton props' default values and may be overwritten under the pushButton root-level configuration option.

pushButton.<option>	type	default	global
variant	'solid' | 'soft' | 'subtle'	'solid'
<variant>.outline	boolean | 'subtle' | 'regular' | 'strong'
squared	boolean
theme	theme		✅
size	size		✅
radius	radius		✅
spacing	spacing		✅

Anatomy

<button.push-button/>

<Icon.icon/>

<slot name="default"/>

<Icon.icon/>

<div.button-loader/>

<span.button-spinner/>