Btn

Button element to handle click events

Basic Usage

<script setup>
import { Btn } from '@8ctavio/vergil/components'
</script>

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

Props

Label

label: string

MiniMarkup

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

<Btn label="Click"/>

Variant

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

Mask

mask: ('ghost' | 'form-field')

Outline

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

The 'regular' and true values are equivalent. For the solid variant, only buttons with mask are affected.

Fill

fill: boolean

only for masked buttons

Underline

underline: boolean

only for masked buttons

Icon

icon: string

alias:

icon-left

<Btn icon="rocket_launch"/>

Icon Right

icon-right: string

<Btn 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'

Radius

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

Spacing

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

Disabled

disabled: boolean

Loading

loading: boolean

API Reference

Props

prop	type	default
label	string
variant	'solid' | 'soft' | 'subtle'	'solid'
mask	'ghost' | 'form-field'
outline	boolean | 'subtle' | 'regular' | 'strong'
underline	boolean
fill	boolean
icon	string
iconLeft	string
iconRight	string
squared	boolean	false
disabled	boolean	false
loading	boolean	false
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

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

btn.<option>	type	default	global
variant	'solid' | 'soft' | 'subtle'	'solid'
<variant>.mask	'ghost' | 'form-field'
<variant>.outline	boolean | 'subtle' | 'regular' | 'strong'
<variant>.underline	boolean
<variant>.fill	boolean
squared	boolean
theme	theme		✅
size	size		✅
radius	radius		✅
spacing	spacing		✅

Anatomy

<button.btn/>

<span.btn-backdrop/>

<div.btn-content/>

<Icon.icon/>

<slot name="default"/>

<Icon.icon/>

<div.btn-loader/>

<span.btn-spinner/>

<slot name="aside"/>