Corner Dialog

View on GitHub

Introduction

The CornerDialog component is used for announcements such as new features and feedback requests. Preferably the content of the CornerDialog should only contain one small paragraph.

Good examples of call to actions for Corner Dialog are: Learn More, Got It and Get in Touch.

Multiple corner dialogs

Be aware that only one CornerDialog can be shown at a single time. Multiple corner dialogs will stack on top of each other.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

CornerDialog Props

childrennode | funcrequired
Children can be a string, node or a function accepting `({ close })`. When passing a string, <Paragraph size={400} color="muted" /> is used to wrap the string.
intent'none' | 'success' | 'warning' | 'danger'
The intent of the CornerDialog. Used for the button.
isShownbool
When true, the dialog is shown.
titlenode
Title of the Dialog. Titles should use Title Case.
onCloseCompletefunc
Function that will be called when the exit transition is complete.
onOpenCompletefunc
Function that will be called when the enter transition is complete.
hasFooterbool
When true, the footer with the cancel and confirm button is shown.
onConfirmfunc
Function that will be called when the confirm button is clicked. This does not close the Dialog. A close function will be passed as a paramater you can use to close the dialog. `onConfirm={(close) => close()}`
confirmLabelstring
Label of the confirm button.
hasCancelbool
When true, the cancel button is shown.
hasClosebool
When true, the close button is shown.
onCancelfunc
Function that will be called when the cancel button is clicked. This closes the Dialog by default. `onCancel={(close) => close()}`
cancelLabelstring
Label of the cancel button.
widthstring | number
Width of the Dialog.
containerPropsobject
Props that are passed to the dialog container.
positionpositions.TOP_LEFT | positions.TOP_RIGHT | positions.BOTTOM_LEFT | positions.BOTTOM_RIGHT
Props that will set position of corner dialog