Banner

• Displays a Banner

import { Banner } from '@viamrobotics/prime-core';

Info

Info message

Here is some helpful information. This message should be no longer than three lines of text.

View details

<Banner
  variant="info"
  cx="max-w-[600px]"
>
  <svelte:fragment slot="title">Info message</svelte:fragment>
  <svelte:fragment slot="subtitle">
    Here is some helpful information. This message should be no longer than three lines of text.
  </svelte:fragment>
  <svelte:fragment slot="action">
    <a href="https://prime.viam.com/">View details</a>
  </svelte:fragment>
</Banner>

Success

Success message

Here is some helpful information. This message should be no longer than three lines of text.

<Banner
  variant="success"
  cx="max-w-[600px]"
>
  <svelte:fragment slot="title">Success message</svelte:fragment>
  <svelte:fragment slot="subtitle">
    Here is some helpful information. This message should be no longer than three lines of text.
  </svelte:fragment>
</Banner>

Warning

Warning message

Here is some helpful information. This message should be no longer than three lines of text.

<Banner
  variant="warning"
  cx="max-w-[600px]"
>
  <svelte:fragment slot="title">Warning message</svelte:fragment>
  <svelte:fragment slot="subtitle">
    Here is some helpful information. This message should be no longer than three lines of text.
  </svelte:fragment>
</Banner>

Danger

Danger message

Here is some helpful information. This message should be no longer than three lines of text.

<Banner
  variant="danger"
  cx="max-w-[600px]"
>
  <svelte:fragment slot="title">Danger message</svelte:fragment>
  <svelte:fragment slot="subtitle">
    Here is some helpful information. This message should be no longer than three lines of text.
  </svelte:fragment>
</Banner>

Danger with button

Danger message

Here is some helpful information. This message should be no longer than three lines of text.

Abandon ship

<Banner
  variant="danger"
  cx="max-w-[600px]"
>
  <svelte:fragment slot="title">Danger message</svelte:fragment>
  <svelte:fragment slot="subtitle">
    Here is some helpful information. This message should be no longer than three lines of text.
  </svelte:fragment>
  <svelte:fragment slot="actionEmphasize">
    <Button variant="dark">Abandon ship</Button>
  </svelte:fragment>
</Banner>