Context dialog

button component context action

Introduction

The context dialog is an overlay which appears on click of a button. It holds context related actions and contains other components like buttons, links, checkboxes, etc.

Context dialog closed

Context dialog open

Styleguide

Context dialog elements

Button

Nested button

Box

background-color: $gray-700
padding: 32px, 12px, 12px, 12px
border-radius: 3px

Behavior

As soon as the context dialog is open, the focus is set on the first interactive element within the dialog. The focus should be trapped inside the context-dialog. On blur, the context dialog closes.

Animation

The context actions menu is not animated at all.

Variants

The context actions menu is a variant of the context dialog placed on the top right within a card, containing secondary buttons.

Context dialog example