Svelma

<script>
  import { Button, Snackbar } from 'svelma'

  function open(props) {
    Snackbar.create({ message: 'I am a snackbar message', ...props })
  }
</script>

<div class="buttons">
  <Button on:click={() => open()}>Default Snackbar</Button>
  <Button type="is-success" on:click={() => open({ type: 'is-success' })}>Success</Button>
  <Button type="is-danger" on:click={() => open({ type: 'is-danger', actionText: 'retry', position: 'is-top-right' })}>Top Right</Button>
  <Button type="is-primary" on:click={() => open({ background: 'has-background-grey-lighter' })}>Custom Background</Button>
</div>

API

Name	Description	Type	Values	Default
`message`	Text or html message for snackbar	String	—	—
`duration`	Duration snackbar will remain on screen, optional	Number	—	`3500`
`position`	Where the snackbar will show on the screen, optional	String	`is-top`, `is-bottom`, `is-top-left`, `is-top-right`, `is-bottom-left`, `is-bottom-right`	`is-bottom-right`
`type`	Type (color), optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`	`is-dark`
`background`	Background type (any of the Bulma `has-background-` classes will work), optional	String	`has-background-*`	—