Components / Feedback

Error X

Component

Animated X icon used to indicate errors or issues, with customizable appearance and animation.

Preview

Usage

API reference

Live preview

Interactive example

Error feedback

Please try again.

Usage

Import the component, then make it your own.

ComponentErrorX

svelte

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

<div style="width: 4rem; height: 4rem;"><ErrorX color="var(--error-t)" /></div>
<p role="alert">The file could not be uploaded. Please try again.</p>

API reference

Props accepted by the component.

3 entries in properties

Property	Type	Default	Description
`is_show`	`boolean`	`true`	Determines whether the ErrorX icon is displayed.
`color`	`CSS color`	`var(--error-t)`	The color of the X icon.
`sw`	`number`	`30`	Stroke width of the X icon lines.