Svelteit

Alerts

Example :: Default

Hello, I am an alert!


<script>
  import { Alert } from '@colorfuldots/svelteit'
</script>

<Alert>Hello, I am an alert!</Alert>

Example :: Dismissible

× IMPORTANT: Please remember to close this after you've read it!


<script>
  import { Alert } from '@colorfuldots/svelteit'
</script>

<Alert dismissible>Please remember to close this after you've read it!</Alert>

Example :: Content + Rounded

This is the best title!

Add more content as much as you want. Add more content as much as you want. Add more content as much as you want. Add more content as much as you want. Add more content as much as you want.


<script>
  import { Alert , Button} from '@colorfuldots/svelteit'
</script>

<Alert dismissible success rounded>
  <h2>This is the best title!</h2>
  <p>
    Add more content as much as you want. Add more content as much as you
    want. Add more content as much as you want. Add more content as much as
    you want. Add more content as much as you want.
  </p>
  <Button light rounded>Button</Button>
</Alert>

Example :: Solid Colors

× This is dismissible and it has a color prop


<script>
  import { Alert } from '@colorfuldots/svelteit'
</script>

<Alert primary dismissible>
   This is dismissible and it has a color prop
</Alert>

<Alert secondary dismissible>
   This is dismissible and it has a color prop
</Alert>

<Alert success dismissible>
   This is dismissible and it has a color prop
</Alert>

<Alert danger dismissible>
   This is dismissible and it has a color prop
</Alert>

<Alert warning dismissible>
   This is dismissible and it has a color prop
</Alert>

<Alert info dismissible>
   This is dismissible and it has a color prop
</Alert>

<Alert light dismissible>
   This is dismissible and it has a color prop
</Alert>

<Alert dark dismissible>
   This is dismissible and it has a color prop
</Alert>

Example :: Outlined Colors

× This is dismissible with color & outline props


<script>
  import { Alert } from '@colorfuldots/svelteit'
</script>

<Alert primary dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

<Alert secondary dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

<Alert success dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

<Alert danger dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

<Alert warning dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

<Alert info dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

<Alert light dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

<Alert dark dismissible outlined>
  This is dismissible and it has a color prop
</Alert>

API

Prop Name	Type	Is Required	Default Value	Description
dismissible	bool	false	false	Adds button and allows the alert to be dismissed
primary, secondary, success, danger, warning, info, light, dark	bool	false		Sets alert color
outlined	bool	false	null	Sets an outline to the alert
rounded	bool	false	null	Adds rounded corners to the alert

Alerts

An alert is a box that appears on the display screen to give you information or to warn you about a potentially damaging operation. For example, it might warn you that the system is deleting one or more files. Unlike dialog boxes, alert boxes do not require any user input. However, you need to acknowledge the alert box by pressing the Enter key or clicking a mouse button to make it go away.