Status

A visual indicator that displays the current status of an item or process.

Anatomy

<script>
  import { Status } from "@saas-ui/svelte/components/status";
</script>

<Status value="success">Active</Status>

Examples

Basic Accessibility

Basic status indicator with default styling.

<Status>Status</Status>

Colours Accessibility

Use the colour prop to customize the indicator colour.

<VStack gap={4}>
	{#each colours as colour}
		<HStack gap={4} class="items-center">
			<Text size="xs" class="w-16">{colour}</Text>
			<Status {colour}>Active</Status>
		</HStack>
	{/each}
</VStack>

Label Accessibility

Add text labels to status indicators.

<HStack gap={6}>
	<Status value="error">Error</Status>
	<Status value="info">Info</Status>
	<Status value="warning">Warning</Status>
	<Status value="success">Success</Status>
</HStack>

Sizes Accessibility

Use the size prop to change the size of the status indicator.

<VStack gap={2} align="start">
	{#each statusSizes as size}
		<HStack gap={10} class="px-4">
			<Status {size} class="w-24" value="warning">In Review</Status>
			<Status {size} class="w-24" value="error">Error</Status>
			<Status {size} class="w-24" value="success">Approved</Status>
		</HStack>
	{/each}
</VStack>

Values Accessibility

Use the value prop to set different status types.

<HStack gap={6}>
	<Status value="error" />
	<Status value="info" />
	<Status value="warning" />
	<Status value="success" />
</HStack>

Props

Prop	Type	Default	Description
`value`	`error \| info \| warning \| success`	`info`	The status value determining the indicator colour.
`size`	`sm \| md \| lg`	`md`	The size of the status indicator.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	-	The colour palette to use for the indicator.
`class`	`text`	-	CSS class to apply to the component.