Banner
- Displays a Banner
import { Banner } from '@viamrobotics/prime-core';
Info
Here is some helpful information. This message should be no longer than three lines of text.
<Banner variant="info" class="min-w-full max-w-[600px]"> <svelte:fragment slot="titleContent">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
Here is some helpful information. This message should be no longer than three lines of text.
<Banner variant="success" class="min-w-full max-w-[600px]"> <svelte:fragment slot="titleContent">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
Here is some helpful information. This message should be no longer than three lines of text.
<Banner variant="warning" class="min-w-full max-w-[600px]"> <svelte:fragment slot="titleContent">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
Here is some helpful information. This message should be no longer than three lines of text.
<Banner variant="danger" class="min-w-full max-w-[600px]"> <svelte:fragment slot="titleContent">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
Here is some helpful information. This message should be no longer than three lines of text.
<Banner variant="danger" class="min-w-full max-w-[600px]" client:load> <svelte:fragment slot="titleContent">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>