<div class="demo-controls" style="display: flex; gap: 1rem; flex-wrap: wrap">
<button
class="button primary"
onclick="
Banner.create({
type: 'success',
title: 'Great job!',
description: 'Your action was successful.',
dismissible: true,
autoDismiss: 5000
});
"
>
Show Success
</button>
<button
class="button warning"
onclick="
Banner.create({
type: 'warning',
title: 'Warning',
description: 'This action requires attention.',
dismissible: true,
countdown: true,
autoDismiss: 8000
});
"
>
Show Warning
</button>
<button
class="button negative"
onclick="
Banner.create({
type: 'error',
title: 'Error occurred',
description: 'Something went wrong.',
dismissible: true,
actions: [
{ text: 'Retry', action: 'retry' },
{ text: 'Cancel', action: 'cancel' }
]
});
"
>
Show Error
</button>
<button
class="button info"
onclick="
Banner.create({
type: 'info',
style: 'light',
title: 'Did you know?',
description: 'This banner has a progress bar.',
progress: true,
autoDismiss: 10000,
position: 'bottom'
});
"
>
Show with Progress
</button>
<button class="button" onclick="Banner.dismissAll();">Dismiss All</button>
</div>