Status

Version - 0.0.10

Displays a status of attached Element like Buttons, Avatars, Boxes, Cards etc.

Installation

npm install @volta/status

Usage

import { Button } from '@volta/status';

export default function Demo() {
  return <Status />;
}

Examples

Sizes

The Button component comes with 2 different sizes that you can change it using the size prop.

import { Status } from '@volta/status';
 
export function Sizes() {
  return (
    <div>
      <Status size="sm" />
      <Status size="lg" animate />
    </div>
  );
}

Colors

import { Status } from '@volta/status';
 
export function Sizes() {
  return (
    <div>
      <Status size="lg" color="okay" />
      <Status size="lg" color="alert" />
      <Status size="lg" color="warning" />
      <Status size="lg" />
      <Status size="lg" color="dense" />
      <Status size="lg" color="secondary" />
    </div>
  );
}

Custom Status

You might need to customize the Status componet onto app level, just use Tailwind classNames to add your CSS

import { Status } from '@volta/status';
 
export function Sizes() {
  return (
    <div className="flex gap-12">
      <Status
        size="lg"
        className="bg-red-400 border-red-600 border-xl rounded-xl"
      />
      <Status
        size="lg"
        className="bg-orange-300 w-10 h-10 border-orange-800 border-xl"
      />
      <Status size="lg" className="bg-sand-300  border-sand-600 border-xl " />
    </div>
  );
}

Status Props

The following props are available for status component.

Attribute	Type	Description	Default
`variant`	Variant	Change status variant	`solid`
`size`	Size	Change size	`sm`
`color`	Color	Change color	`primary`
`animate`	`boolean`	Default ping animation	`false`
`className`	`string`	Add custom classes	`''`

Slider Switch