Btn3D

Button with 3D effect

Basic Usage

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

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

Props

Label

label: string

MiniMarkup

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

<Btn3D 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

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

Icon Right

icon-right: string

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

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

btn3D.<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.btn3D/>

<Icon.icon/>

<slot name="default"/>

<Icon.icon/>

<div.btn-loader/>

<span.btn-spinner/>