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.
<Component initialState={{ isShown: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <CornerDialog
        title="Welcome to this new feature"
        isShown={state.isShown}
        onCloseComplete={() => setState({ isShown: false })}
      >
        The corner dialog component is used for new feature announcements
        and feedback requests from the user.
      </CornerDialog>
      <Button onClick={() => setState({ isShown: true })}>
        Show “Learn More” Corner Dialog
      </Button>
    </React.Fragment>
  )}
</Component>
code Hide code
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ isShown: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <CornerDialog
        title="We’d love to hear from you!"
        isShown={state.isShown}
        onCloseComplete={() => setState({ isShown: false })}
      >
        Help shape Segment’s data governance product roadmap. If you’re
        willing to provide feedback, let’s chat.
      </CornerDialog>
      <Button onClick={() => setState({ isShown: true })}>
        Show “Get in Touch” Corner Dialog
      </Button>
    </React.Fragment>
  )}
</Component>
code Hide code
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ isShown: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <CornerDialog
        title="GDPR agreement available"
        isShown={state.isShown}
        onCloseComplete={() => setState({ isShown: false })}
      >
        Segment now offers a Data Processing Agreement and EU&nbsp;Model
        Contract Clauses as a means of meeting the adequacy and security
        requirements of the GDPR.
      </CornerDialog>
      <Button onClick={() => setState({ isShown: true })}>
        Show “GDPR” Corner Dialog
      </Button>
    </React.Fragment>
  )}
</Component>
code Hide code

CornerDialog Props

childrenunionrequired
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.
intentenum = 'none'
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 = true
When true, the footer with the cancel and confirm button is shown.
onConfirmfunc = close => close()
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 = 'Learn More'
Label of the confirm button.
hasCancelbool = true
When true, the cancel button is shown.
onCancelfunc = close => close()
Function that will be called when the cancel button is clicked. This closes the Dialog by default. `onCancel={(close) => close()}`
cancelLabelstring = 'Close'
Label of the cancel button.
widthunion = 392
Width of the Dialog.
containerPropsobject
Props that are passed to the dialog container.