Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

dialog

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
56
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
202 KB
The Dialog component is used to show content on top of an overlay. It blocks any interaction with the page — until the overlay is clicked, or a close action is triggered.
1 contributor
Install dialog as a package?
Copied
npm i @bit/segmentio.evergreen.dialog
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
children
(required)
node | function

Children can be a string, node or a function accepting ({ close }). When passing a string, is used to wrap the string.

intent
'none' | 'success' | 'warning' | 'danger''none'

The intent of the Dialog. Used for the button.

isShown
boolfalse

When true, the dialog is shown.

title
node

Title of the Dialog. Titles should use Title Case.

hasHeader
booltrue

When true, the header with the title and close icon button is shown.

hasFooter
booltrue

When true, the footer with the cancel and confirm button is shown.

hasCancel
booltrue

When true, the cancel button is shown.

hasClose
booltrue

When true, the close button is shown

onCloseComplete
function

Function that will be called when the exit transition is complete.

onOpenComplete
function

Function that will be called when the enter transition is complete.

onConfirm
functionclose => 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()}

confirmLabel
string'Confirm'

Label of the confirm button.

isConfirmLoading
boolfalse

When true, the confirm button is set to loading.

isConfirmDisabled
boolfalse

When true, the confirm button is set to disabled.

onCancel
functionclose => close()

Function that will be called when the cancel button is clicked. This closes the Dialog by default.

onCancel={(close) => close()}

cancelLabel
string'Cancel'

Label of the cancel button.

shouldCloseOnOverlayClick
booltrue

Boolean indicating if clicking the overlay should close the overlay.

shouldCloseOnEscapePress
booltrue

Boolean indicating if pressing the esc key should close the overlay.

width
string | number560

Width of the Dialog.

topOffset
string | number'12vmin'

The space above the dialog. This offset is also used at the bottom when there is not enough vertical space available on screen — and the dialog scrolls internally.

sideOffset
string | number'16px'

The space on the left/right sides of the dialog when there isn’t enough horizontal space available on screen.

minHeightContent
string | number80

The min height of the body content. Makes it less weird when only showing little content.

containerProps
object

Props that are passed to the dialog container.

contentContainerProps
object

Props that are passed to the content container.

preventBodyScrolling
boolfalse

Whether or not to prevent scrolling in the outer body

children
function