Dialog React Component

Dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.

Dialog Components

There are following components included:

  • Dialog - dialog element
  • DialogButton - dialog button element

Dialog Props

NameTypeDefaultDescription
backdropbooleantrue

Enables Popup backdrop (dark semi transparent layer behind)

buttonsReactNode

Dialog buttons content

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-white dark:bg-neutral-800'

Dialog bg color in iOS theme

colors.bgMaterialstring'bg-md-light-surface-3 dark:bg-md-dark-surface-3'

Dialog bg color in iOS theme

colors.contentTextIosstring''

Content text color in iOS theme

colors.contentTextMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Content text color in Material theme

colors.titleIosstring''

Title text color in iOS theme

colors.titleMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'

Title text color in Material theme

componentstring'div'

Component's HTML Element

contentReactNode

Dialog main content

openedbooleanfalse

Allows to open/close Popup and set its initial state

sizeIosstring'w-[16.875rem]'

Tailwind CSS size classes for iOS theme

sizeMaterialstring'w-[19.5rem]'

Tailwind CSS size classes for Material theme

titleReactNode

Dialog title content

titleFontSizeIosstring'text-[18px]'

Tailwind CSS classes for title font size iOS theme

titleFontSizeMaterialstring'text-[24px]'

Tailwind CSS classes for title font size Material theme

translucentbooleantrue

Makes Dialog background translucent (with backdrop-filter: blur) in iOS theme

onBackdropClickfunction(e)

Click handler on backdrop element

DialogButton Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.activeBgIosstring'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'

Active/pressed state bg color in iOS theme

colors.disabledTextIosstring'text-black text-opacity-30 dark:text-white dark:text-opacity-30'

Disabled button text color in iOS theme

colors.textIosstring''text-primary

Text color in iOS theme

componentstring'button'

Component's HTML Element

disabledbooleanfalse

Makes button disabled

strongbooleanfalse

Makes button bold in iOS theme and fill in Material theme, overwrites strongIos and strongMaterial

strongIosbooleanfalse

Makes button bold in iOS theme

strongMaterialbooleanfalse

Makes button fill in Material theme

Examples

Dialog.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Dialog,
DialogButton,
Block,
List,
ListItem,
Radio,
Button,
} from 'konsta/react';
export default function DialogPage() {
const [basicOpened, setBasicOpened] = useState(false);
const [alertOpened, setAlertOpened] = useState(false);
const [confirmOpened, setConfirmOpened] = useState(false);
const [listOpened, setListOpened] = useState(false);
const [radioValue, setRadioValue] = useState('batman');
return (
<Page>
<Navbar
title="Dialog"
/>
<Block strong inset className="space-y-4">
<p>
Dialog is a type of modal window that appears in front of app content
to provide critical information, or prompt for a decision to be made.
</p>
</Block>
<Block strong inset>
<p className="grid grid-cols-2 md:grid-cols-4 gap-4">
<Button rounded onClick={() => setBasicOpened(true)}>
Basic
</Button>
<Button rounded onClick={() => setAlertOpened(true)}>
Alert
</Button>
<Button rounded onClick={() => setConfirmOpened(true)}>
Confirm
</Button>
<Button rounded onClick={() => setListOpened(true)}>
List
</Button>
</p>
</Block>
<Dialog
opened={basicOpened}
onBackdropClick={() => setBasicOpened(false)}
title="Dialog Title"
content="Dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made."
buttons={
<>
<DialogButton onClick={() => setBasicOpened(false)}>
Action 2
</DialogButton>
<DialogButton onClick={() => setBasicOpened(false)}>
Action 1
</DialogButton>
</>
}
/>
<Dialog
opened={alertOpened}
onBackdropClick={() => setAlertOpened(false)}
title="Konsta UI"
content="Hello world!"
buttons={
<>
<DialogButton onClick={() => setAlertOpened(false)}>
Ok
</DialogButton>
</>
}
/>
<Dialog
opened={confirmOpened}
onBackdropClick={() => setConfirmOpened(false)}
title="Konsta UI"
content="All good today?"
buttons={
<>
<DialogButton onClick={() => setConfirmOpened(false)}>
No
</DialogButton>
<DialogButton strong onClick={() => setConfirmOpened(false)}>
Yes
</DialogButton>
</>
}
/>
<Dialog
opened={listOpened}
onBackdropClick={() => setListOpened(false)}
title="Your super hero"
content={
<List nested className="-mx-4">
<ListItem
label
title="Batman"
after={
<Radio
component="div"
value="batman"
checked={radioValue === 'batman'}
onChange={() => setRadioValue('batman')}
/>
}
/>
<ListItem
label
title="Spider-man"
after={
<Radio
component="div"
value="spiderman"
checked={radioValue === 'spiderman'}
onChange={() => setRadioValue('spiderman')}
/>
}
/>
<ListItem
label
title="Hulk"
after={
<Radio
component="div"
value="hulk"
checked={radioValue === 'hulk'}
onChange={() => setRadioValue('hulk')}
/>
}
/>
</List>
}
buttons={
<>
<DialogButton onClick={() => setListOpened(false)}>
Confirm
</DialogButton>
</>
}
/>
</Page>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.