Reference

Ready-made components and props

The 29 components registered by voodoo.full.min.js, one by one. Each one accepts both spellings, <VButton> and <v-button>. The ready-made components guide shows how to use them; this page lists what each one takes.

Rules that hold for all of them

No colour is fixed in the CSS. Everything comes from the variables generated by V.palette(), so swapping the palette changes the whole interface at once, in both themes.
Boolean props accept three spellings. The empty attribute (loading), the text (loading="true") and the reactive binding (:loading="saving"). These count as true: the empty attribute, true, 1, yes.
Lists accept three formats: the name of a variable from the surrounding scope, a literal comma-separated list, or a reactive binding.
The form controls are drawn from scratch. Each one uses appearance: none and keeps a hidden native element, which is what preserves accessibility and submission inside a <form>. All of them work with v-model on the host itself.
Always close the tag. <VInput ... /> closes nothing in HTML: write <VInput ...></VInput>.

<VSelect options="states"></VSelect>       <!-- variable from the v-data around it -->
<VSelect options="SP, RJ, MG"></VSelect>   <!-- literal list -->
<VSelect :options="loadedList"></VSelect>  <!-- reactive binding -->

Icons

They come from an internal SVG set. An unknown name simply draws nothing.

check  x  plus  minus  search  chevron-down  chevron-up  chevron-left  chevron-right
arrow-up  arrow-down  arrow-left  arrow-right  user  users  mail  lock  eye  eye-off
calendar  clock  star  info  alert  warning  trash  edit  copy  download  upload
settings  home  heart  bell  filter  external  refresh  folder  file  image  link
menu  more  logout  card  chart  box  inbox

Action

VButton

Prop	Values	Default
`variant`	`primary`, `secondary`, `outline`, `ghost`, `soft`, `link`, `danger`, `success`, `warning`, `accent`	`primary`
`size`	`xs`, `sm`, `md`, `lg`, `xl`	`md`
`icon`, `iconRight`	icon name	empty
`type`	`button`, `submit`, `reset`	`button`
`loading`, `disabled`, `block`, `rounded`	boolean	`false`
`ariaLabel`	accessible label	empty

<VButton variant="primary" icon="check">Confirm</VButton>
<VButton variant="danger" size="sm" icon="trash">Delete</VButton>
<VButton :loading="saving" block>Save everything</VButton>

VIconButton

A button with nothing but an icon. The label becomes the accessible label.

Prop	Default
`icon`	`more`
`label`	empty
`variant`	`ghost`
`size`	`md`
`type`	`button`
`disabled`, `loading`, `rounded`	`false`

VTooltipButton

Prop	Default
`tooltip`	empty
`placement`	`top`, accepts `top`, `bottom`, `left`, `right`
`variant`, `size`	`ghost`, `md`
`icon`, `ariaLabel`	empty
`type`, `disabled`	`button`, `false`

Structure

VCard

Prop	Default
`title`, `subtitle`, `icon`	empty
`padded`	`true`
`hoverable`	`false`

VDivider

Prop	Default
`label`	empty
`vertical`	`false`
`spacing`	empty

VEmptyState

Prop	Default
`icon`	`inbox`
`title`	`Nothing here yet`
`description`	empty

Form

VLabel and VField

VLabel accepts for, size (md) and required. VField is the field wrapper, with a label, a hint and an error, use it when you want to wrap a control of your own.

`VField` prop	Default
`label`, `hint`, `error`, `for`	empty
`required`, `disabled`	`false`

<VField label="Date of birth" hint="Use the day/month/year format">
  <input type="text" v-mask="date">
</VField>

VInput

Prop	Default
`label`, `placeholder`, `hint`, `error`, `value`, `name`, `id`, `icon`, `suffix`	empty
`type`	`text`
`size`	`md`
`autocomplete`, `inputmode`, `maxlength`, `min`, `max`, `step`	empty
`required`, `disabled`, `readonly`, `clearable`	`false`

Emits clear when the clear button is used.

VTextarea

Prop	Default
`label`, `placeholder`, `hint`, `error`, `value`, `name`, `id`, `maxlength`	empty
`rows`	`4`
`size`	`md`
`resize`	`vertical`
`required`, `disabled`, `readonly`, `counter`	`false`

VSelect

A select drawn from scratch, with search, multiple selection and keyboard navigation.

Prop	Default
`label`, `hint`, `error`, `name`, `id`	empty
`placeholder`	`Select`
`searchPlaceholder`	`Search...`
`emptyText`	`No options found`
`options`, `value`	list of options and initial value
`size`	`md`
`multiple`, `searchable`, `clearable`, `disabled`, `required`	`false`

Emits change with the current value, text, or an array when multiple. Formats accepted in options:

['SP', 'RJ', 'MG']
[{ value: 'sp', label: 'São Paulo' }, { value: 'rj', label: 'Rio de Janeiro', disabled: true }]

The alternative keys id, key, text, name and title are understood too.

VCheckbox, VRadio and VSwitch

Prop	Default
`label`, `description`, `error`, `name`, `id`	empty
`value`	`on` on `VCheckbox`, empty on `VRadio`
`checked`, `disabled`, `required`	`false`
`size`	`md`, on `VSwitch` only

VCheckbox and VSwitch emit change with the boolean; VRadio, with the chosen value.

VRating

Prop	Default
`value`	`0`
`max`	`5`
`size`	`md`
`label`	`Rating`
`readonly`, `disabled`, `showValue`	`false`
`allowClear`	`true`

State and information

VBadge and VTag

Prop	Default
`tone`	`neutral`, accepts `primary`, `accent`, `success`, `warning`, `danger`, `info`, `muted`, `neutral`
`variant`	`soft`, accepts `soft`, `solid`, `outline`
`size`	`md`, on `VBadge` only
`icon`	empty
`dot`	`false`, on `VBadge` only
`closable`, `removeLabel`	`false`, `Remove`, on `VTag` only

VTag emits remove with the tag text.

VAlert

Prop	Default
`tone`	`info`
`title`, `icon`	empty
`closable`	`false`
`closeLabel`	`Close alert`

Emits close.

VAvatar

Prop	Default
`name`, `src`, `alt`	empty
`size`	`md`
`shape`	`circle`, accepts `circle`, `round`, `square`
`status`	empty, accepts `online`, `away`, `busy`

With no image, it shows the initials of name.

VSpinner, VSkeleton and VProgress

Component	Props
`VSpinner`	`size` (`md`), `tone` (`primary`), `label` (`Loading`)
`VSkeleton`	`width` (`100%`), `height` (`14px`), `radius`, `lines` (`1`), `circle` (`false`)
`VProgress`	`value` (`0`), `max` (`100`), `tone` (`primary`), `size` (`md`), `label`, `showValue` and `indeterminate` (`false`)

VStat

Prop	Default
`label`, `value`, `hint`, `icon`	empty
`delta`	numeric change, with or without `%`
`suffix`	`%`
`inverted`	`false`. With `true`, a negative change counts as positive

<VStat label="Revenue" value="R$ 128.400" delta="12.4" icon="chart" hint="vs. last month"></VStat>
<VStat label="Cancellations" value="18" delta="-6" inverted></VStat>

Data and navigation

VTable

Prop	Default
`columns`, `rows`	column definition and array of objects
`empty`	`No records found`
`sortable`, `hover`	`true`
`dense`, `striped`	`false`
`caption`	empty

Emits sort with { key, direction }. The columns accept three formats:

['name', 'email']                                   // label derived from the key
[{ key: 'name', label: 'Name', align: 'left', sortable: true }]
'name:Name, total:Total:right'                      // key:label:alignment

Keys with a dot work: customer.name.

VPagination

Prop	Default
`page`, `pages`	`1`
`total`	`0`
`perPage`	`10`
`siblings`	`1`
`previousLabel`, `nextLabel`	`Previous`, `Next`
`ariaLabel`	`Pagination`

Emits change with the chosen page.

VBreadcrumb

Prop	Default
`items`	the trail
`separator`	`/`
`ariaLabel`	`Breadcrumb`

<VBreadcrumb items="Home:/, Products:/products, Detail"></VBreadcrumb>
<VBreadcrumb :items="[{ label: 'Home', href: '/' }, { label: 'Profile' }]"></VBreadcrumb>

The last item never turns into a link and gets aria-current="page".

VSteps

Prop	Default
`steps`	list of steps
`current`	`0`
`vertical`	`false`
`ariaLabel`	`Steps`

VTimeline

Accepts items. In the text form, the events are separated by semicolons and the fields by a vertical bar: title | description | time | tone.

<VTimeline items="Order created|We received your order|10:02; Being picked||10:40"></VTimeline>
<VTimeline :items="[{ title: 'Shipped', description: 'On its way', time: 'yesterday', tone: 'success' }]"></VTimeline>

VCodeBlock

Prop	Default
`code`, `language`, `filename`	empty
`copyLabel`, `copiedLabel`	`Copy`, `Copied`
`wrap`	`false`

Emits copy with the copied text.