Status | tcpsystems/ui

Try it

Deployment healthy

Svelte

<Status tone="ok">Deployment healthy</Status>

Examples

Deployment

Deployment healthy

Deployment.svelte

<script lang="ts">
	import Status from '@tcpsystems/ui/foundation/Status';
</script>

<Status tone="ok">Deployment healthy</Status>

Tones

Awaiting approval All checks passed Certificate expires soon Deployment failed Maintenance scheduled Rolling out revision a83c21f

Tones.svelte

<script lang="ts">
	import Status from '@tcpsystems/ui/foundation/Status';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack>
	<Status>Awaiting approval</Status>
	<Status tone="ok">All checks passed</Status>
	<Status tone="warn">Certificate expires soon</Status>
	<Status tone="danger">Deployment failed</Status>
	<Status tone="info">Maintenance scheduled</Status>
	<Status tone="progress">Rolling out revision a83c21f</Status>
</Stack>

With date

Last successful deployment2026-11-06

With date.svelte

<script lang="ts">
	import Status from '@tcpsystems/ui/foundation/Status';
</script>

<Status tone="ok" date="2026-11-06">Last successful deployment</Status>

API

Import

import Status from '@tcpsystems/ui/foundation/Status';

Prop	Type	Default
`tone?`	`Tone`	`'neutral'`
`date?`	`string`	none
`children?`	`native`	none

Hook	Kind
`.tcp-status`	Root class
`data-tone`	Data attribute