<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>