The Status component is used to display status indicators or messages with customizable appearance. It is ideal for representing system states, notifications, or feedback.

• Variants: Different animations or styles (e.g., bounce, none) to indicate dynamic status.
• Colors: Can reflect semantic meanings like success, error, warning, or info.
• Sizes: Supports numeric and string-based sizes for flexible display.

Usage Example

Preview

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Status, themeConfig } from "@fefade-ui/svelte"

  const { colors } = $derived(themeConfig())
</script>

<div style="max-width: 300px; margin: 0 auto; line-height: 3;">
  {#each Constants.statusVariants as variant, i (variant)}
    <Status {variant} color={i % 2 ? colors.success : colors.error} />
    <br />
  {/each}

  {#each ["5rem", 100, "150px", 200] as size, i (i)}
    <Status
      color={i % 2 ? colors.info : colors.warning}
      variant={i % 2 ? "bounce" : "none"}
      {size}
    />
    <br />
  {/each}
</div>

Props

Prop	Type	Default	Description
variant	"bounce" | "none" | string	"none"	Visual style or animation type for the status indicator.
color	string	"primary"	Color of the status indicator, usually aligned with theme or semantic meaning.
size	string | number	"md"	Size of the status indicator; can be a numeric pixel value or predefined string.
class	string	—	Optional CSS class for additional styling.
style	CSSProperties	—	Inline styles for custom appearance.

Notes

• Can be used in dashboards, forms, or UI areas requiring quick status feedback.
• Multiple Status components can be combined for lists or grouped indicators.