Alixan UI

Статус

Status pill в стиле Alixan UI для состояний success, warning, info и error.

Установка

npx alixan-ui-nuxt add status

Использование

Success
Warning
Info
Error
<template>
  <div class="flex flex-wrap items-center gap-2">
    <Status label="Success" type="success" />
    <Status label="Warning" type="warning" />
    <Status label="Info" type="info" />
    <Status label="Error" type="error" />
  </div>
</template>

Размер

Small
Medium
Large
<template>
  <div class="flex flex-wrap items-center gap-2">
    <Status label="Small" size="sm" type="success" />
    <Status label="Medium" type="success" />
    <Status label="Large" size="lg" type="success" />
  </div>
</template>

Справочник API

СвойствоТипПо умолчаниюОписание
labelstring-Запасной текст, если default slot не используется.
type'success' | 'warning' | 'info' | 'error''info'Семантический тон статуса.
size'sm' | 'md' | 'lg''md'Управляет высотой, padding и gap.