Components / Feedback

Success Check

Component

Displays a success checkmark with animations to indicate successful actions or states.

Preview

Usage

API reference

Live preview

Interactive example

Success feedback

Everything is saved.

Usage

Import the component, then make it your own.

ComponentSuccessCheck

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { SuccessCheck } from "sveltekit-ui"
</script>

<div style="width: 4rem; height: 4rem;"><SuccessCheck color="var(--success-t)" /></div>
<p role="status">Upload complete.</p>

API reference

Props accepted by the component.

3 entries in properties

Property	Type	Default	Description
`is_show`	`boolean`	`true`	Determines if the success checkmark should be displayed.
`color`	`string`	`var(--primary-t)`	Specifies the color of the checkmark.
`sw`	`number`	`30`	Stroke width of the checkmark and circle.