Velvet Thunder

Alert

Levels

<DemoSpaceY>
  <VelvetAlert @level="danger">
    <:title>
      Danger Alert
    </:title>
    <:content>
      More info about this danger alert goes here. This example text is going to
      run a bit longer, so that you can see how spacing within an alert works
      with this kind of content.
    </:content>
  </VelvetAlert>

  <VelvetAlert @level="info">
    <:title>
      Info Alert
    </:title>
    <:content>
      More info about this info alert goes here. This example text is going to
      run a bit longer, so that you can see how spacing within an alert works
      with this kind of content.
    </:content>
  </VelvetAlert>

  <VelvetAlert @level="success">
    <:title>
      Success Alert
    </:title>
    <:content>
      More info about this success alert goes here. This example text is going
      to run a bit longer, so that you can see how spacing within an alert works
      with this kind of content.
    </:content>
  </VelvetAlert>

  <VelvetAlert @level="warning">
    <:title>
      Warning Alert
    </:title>
    <:content>
      More info about this warning alert goes here. This example text is going
      to run a bit longer, so that you can see how spacing within an alert works
      with this kind of content.
    </:content>
  </VelvetAlert>
</DemoSpaceY>

Custom Icons

<VelvetAlert @level="danger">
  <:icon as |icon|>
    <VelvetIcon::XMark class={{icon.class}} />
  </:icon>
  <:title>
    Danger Alert
  </:title>
  <:content>
    More info about this danger alert goes here. This example text is going to
    run a bit longer, so that you can see how spacing within an alert works with
    this kind of content.
  </:content>
</VelvetAlert>

Examples

Handle Hide Events

Edit this demo

Use the @onHide argument to handle hide events.

<DemoSpaceY {{velvet-auto-animate}}>
  {{#if this.isShown}}
    <VelvetSwitch
      @isChecked={{this.isHideable}}
      @onChange={{this.setIsHideable}}
    >
      Hideable
    </VelvetSwitch>
    <VelvetAlert
      @isHideable={{this.isHideable}}
      @level="info"
      @onHide={{this.onHide}}
    >
      <:title>
        Info Alert
      </:title>
      <:content>
        More info about this info alert goes here. This example text is going to
        run a bit longer, so that you can see how spacing within an alert works
        with this kind of content.
      </:content>
    </VelvetAlert>
  {{else}}
    <VelvetButton @onClick={{this.showAlert}} @variant="primary" class="w-fit">
      Show Alert
    </VelvetButton>
  {{/if}}
</DemoSpaceY>

Signature

Element

HTMLDivElement

Blocks

NameDescriptionType
:content *The content of the alert.[]
:iconThe icon of the alert.[{ class: 'velvet-alert-icon'; }]
:title *The title of the alert.[]
Blocks marked with * are required.

Arguments

NameDescriptionTypeDefault Value
@isHideableIndicate if the alert is hideable.booleanfalse
@level *The level of the alert.'danger' | 'info' | 'success' | 'warning'undefined
@onHideHandle the alert's `hide` event.() => voidundefined
Arguments marked with * are required.
Getting Started
Avatar