Components / Feedback

Info Box

Component

Colored box used for errors, warnings, or other notes.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component, then make it your own.

ComponentInfoBox

svelte

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

<InfoBox message="Your draft is saved locally." is_cancelable={true} />

API reference

Props accepted by the component.

10 entries in properties

Property	Type	Default	Description
`h`	`number`	`1`	0-25 hue
`message`	`string`	`null`	Message
`link_name`	`string`	`null`	link name displayed at end of note
`link`	`string`	`null`	link to direct to
`is_cancelable`	`boolean`	`true`	Adds an × to make the note disappear
`br`	`number`	`0`	Border radius in rem
`ml`	`number`	`0`	margin-left in rem
`mr`	`number`	`0`	margin-right in rem
`mt`	`number`	`0`	margin-top in rem
`mb`	`number`	`0`	margin-bottom in rem