BaseButton

import BaseButton from "@wikicasa-dev/components/UIKit/BaseButton";

Use it for every clickable action that is not navigation. Use a plain <a> (or the app's link component) for links to other pages. Use BaseTabsTrigger for tabs.

The look is chosen with btnClass (default uikit-btn-w-primary):

btnClass	Looks like	Use it for
uikit-btn-w-primary	Solid blue, white text	The main action of a view or form ("Cerca", "Contatta l'agenzia"). One per area.
uikit-btn-w-secondary	Solid light blue-lavender	Secondary action next to a primary one.
uikit-btn-w-danger	Solid red	Destructive/irreversible actions ("Elimina annuncio").
uikit-btn-w-warning	Solid yellow, dark text	Attention-grabbing promos/upsells. Use sparingly.
uikit-btn-light	White, blue text	Actions on top of blue or dark backgrounds.
uikit-btn-show-more	White, blue text, no radius	"Mostra di più" / expand-list links.
uikit-btn-transparent	No background, no padding	Icon-only buttons and text-like buttons. Combine with :with-min-width="false".
uikit-btn-single-selection	White, regular weight	One option in a single-choice group (e.g. number of rooms). Set keepActive on the selected one.
uikit-btn-multi-selection	Light gray, bordered	One option in a multi-choice group (e.g. features). Set keepActive on each selected one.
uikit-btn-facile	Solid orange	Only for CTAs of the Facile mortgage partner (its brand orange). Not a general-purpose color.

outlined gives a white button with a colored border; it is styled only for uikit-btn-w-primary, uikit-btn-w-secondary and uikit-btn-w-danger. size is sm (36px tall), default (42px) or lg (47px).

#Usage

<script setup lang="ts">
import BaseButton from "@wikicasa-dev/components/UIKit/BaseButton";
import { ref } from "vue";

const sending = ref(false);
const rooms = ref(2);
</script>

<template>
  <BaseButton type="button" :is-loading="sending" @click="sending = true">
    Contatta l'agenzia
  </BaseButton>
  <BaseButton btn-class="uikit-btn-w-primary" outlined size="sm">Salva ricerca</BaseButton>

  <BaseButton
    v-for="n in [1, 2, 3, 4]"
    :key="n"
    btn-class="uikit-btn-single-selection"
    :keep-active="rooms === n"
    @click="rooms = n"
  >
    {{ n }} locali
  </BaseButton>

  <BaseButton btn-class="uikit-btn-transparent" :with-min-width="false" aria-label="Chiudi" title="Chiudi">
    ✕
  </BaseButton>
</template>

#Do / Don't

• Icon-only button: always pass ariaLabel (and title for a hover hint); the icon alone gives screen readers nothing.
• Set type="button" unless it should submit a form: no type is rendered by default, so inside a <form> it acts as submit.
• isLoading replaces the content with a spinner and disables the button; don't also swap the label yourself.
• btnClass only accepts the variants above. Put your own layout/spacing classes in class, not in btnClass.
• Full-width buttons: add style="width: 100%" (or your own class); a min width of 90px applies unless :with-min-width="false".
• Content with an icon: make the button a flex row (style="display: flex; align-items: center; gap: 10px"). The default slot exposes hover (boolean) to swap icon colors.
• Hover colors only change from 576px up; on phones the button keeps its resting colors.

#Styling hooks

Each variant sets these CSS custom properties on the button; override them with a more specific selector or inline style: --btn-bg-color, --btn-text-color, --btn-border-color, --btn-border-width, --btn-border-radius, --btn-height, --btn-px, --btn-py, --btn-min-w, --btn-font-size. uikit-btn-facile also reads --btn-facile-color and --btn-facile-hover-color.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
btnClass	"uikit-btn-w-primary" | "uikit-btn-w-secondary" | "uikit-btn-w-warning" | "uikit-btn-w-danger" | "uikit-btn-transparent" | "uikit-btn-light" | "uikit-btn-show-more" | "uikit-btn-multi-selection" | "uikit-btn-single-selection" | "uikit-btn-facile"	"uikit-btn-w-primary"
outlined	boolean
size	"" | "lg" | "sm"
withMinWidth	boolean	true
keepActive	boolean
isLoading	boolean
disabled	boolean
ariaLabel	string
title	string			Add the title for screen readers when the button consists of just an icon
dataCy	string
type	HTMLButtonType

Events

Name	Payload
click	[e: MouseEvent]
mouseover	[e: MouseEvent]
keydown	[e: KeyboardEvent]
mouseout	[e: MouseEvent]

v-model

None.

Slots

Name	Slot props
default	{ hover: boolean; }
spinner

Exposed (template ref)

Name	Type
getRootElement	() => HTMLButtonElement | null