Status ​

Displays a status badge which can either be static or editable.

When to Use

• To indicate the state of an item using different colors for easy recognition.

Usage ​

import { ref } from 'vue';
import { Status } from '@youcan/alto';
import type { StatusObject } from '@youcan/alto/types';

const staticFruit = ref<StatusObject>({
  color: '#fffad2',
  label: 'Banana 🍌',
  labelColor: '#555022',
});

<Status :status="staticFruit" />

API Reference ​

Examples ​

Dynamic ​

Displays a list of selectable statuses to choose from.