Alixan UI

Status

A soft Cupertino-inspired status pill for success, warning, info and error states.

Installation

npx alixan-ui-nuxt add status

Usage

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>

Size

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 Reference

PropTypeDefaultDescription
labelstring-Fallback text when the default slot is not used.
type'success' | 'warning' | 'info' | 'error''info'Semantic status tone.
size'sm' | 'md' | 'lg''md'Controls height, padding and gap.