Snackbar
beta

A snack bar is a pop-up actions or totals row that appears beneath a table with selectable rows. It is used to show information that would otherwise be hidden below the visible viewport.

Datapoint 1 Datapoint 2
Cancel

It has two main content areas: the totals section on the left, and CTAs on the right.

When the table first loads, snackbar is not visible.

Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%

The snackbar appears when the user selects one or more rows. It sticks to the bottom of the viewport when the user is scrolling through the table. Check a box below to see the snackbar in action.

The content area on the left spans 8 of 12 columns before wrapping.

Datapoint 1 Datapoint 2 Datapoint 3 Datapoint 4 Datapoint 5 Datapoint 6
Cancel

Usage