Note

Usage

<script lang="ts">
  import { Note, NoteIcon, NoteContent, NoteTitle, NoteDescription, NoteLink } from '$lib/components/note';
  import { Updates } from '$lib/components/icons';
</script>

<Note variant="primary" style="outline" icon={Updates}>
  <NoteContent>
    <NoteTitle>New features available</NoteTitle>
    <NoteDescription>
      We've added dark mode support and improved performance across the application.
    </NoteDescription>
  </NoteContent>
  <NoteLink>See updates</NoteLink>
</Note>

Properties

Prop	Type	Default
`variant`	`string`	`primary`
`style`	`string`	`outline`
`orientation`	`string`	`vertical`
`closable`	`boolean`	`true`
`fullWidth`	`boolean`	`false`
`icon`	`ComponentType`	-

NoteLink

Prop	Type	Default
`href`	`string`	-
`leadingIcon`	`ComponentType`	-
`trailingIcon`	`ComponentType`	-
`underline`	`boolean`	`false`
`button`	`boolean`	`false`
`disabled`	`boolean`	`false`

Examples

Variants

Use the variant property to change the color of the note, which helps convey its semantic meaning or purpose.

Styles

Use the style property to change the visual appearance within each variant.

Orientation

Use the orientation property to change the orientation of the note.

Full width

Use the fullWidth property to make the note take up the full width of its container.

Closable

Use the closable property to prevent the user from closing the note. By default, notes are closable.

Note

On this page