Odyssey styleguide

Snackbar

Toggle example guides Toggle HTML markup

Snackbars are pop-up messages that confirm user actions and provide direct used feedback of the performed action. Components may or may not include an icon and/or undo option. (the style="position: absolute" should not be copied)

<insert-markup>components.snackbar-</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--warning
Warning message
<insert-markup>components.snackbar-0</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--success
Success message
<insert-markup>components.snackbar-1</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--info
Information message
<insert-markup>components.snackbar-2</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--error
Error message
<insert-markup>components.snackbar-3</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

Markup 
<div class="odyssey-snackbar [modifier class]">
	<i class="odyssey-snackbar__icon"></i>
	<div class="odyssey-snackbar__text-container">
		<p class="odyssey-snackbar__text odyssey-snackbar__text--bold">Input for user feedback of performed action.</p>
		<p class="odyssey-snackbar__text">Description for user feedback of performed action.</p>
	</div>
</div>
Source: src/components/snackbar.less, line 1