Back to gallery

Design engineering: a publish button

Whenever something is publishable, you need an action for that. And when it’s published, you need an action to unpublish it, and maybe additional actions that should be available when published. This publish button was created at beam to solve this problem.

Following beam’s minimalistic approach to design, the button is just an icon, until hovered or focused. In either of these states, the button reveals the action label. Clicking the button transitions the content to feedback about what’s happening, or about what’s happened in the case of successful / unsuccessful publishing or unpublishing.

Interactive demo

Network calls are simulated and can fail with a 25% probability, click a few times and the outcome might be different, you can also use the buttons below the card to slow down animations.

Hover and click this ->

Up next

A dock component
-->