Feedback

Dialog

Dialog modals in UI design are pop-up interfaces that interrupt the main workflow to capture user attention for a specific task or message.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

Default

A regular dialog displays information or options to the user, allowing them to close  it or make a selection without requiring immediate action.

Alert Dialog

An alert dialog prompts the user to take action or acknowledge a message, typically requiring a confirmation or response before proceeding.

Are you sure absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Cancel

Continue

Dialog / React Native

      <Dialog>
        <DialogTrigger asChild>
          <Button variant='secondary'>
            <Text>Edit Profile</Text>
          </Button>
        </DialogTrigger>
        <DialogContent className='sm:max-w-[425px]'>
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you're done.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button>
                <Text>I accept</Text>
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>

Alert Dialog / React Native

      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant='secondary'>
            <Text>Show Alert Dialog</Text>
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your account and remove
              your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>
              <Text>Cancel</Text>
            </AlertDialogCancel>
            <AlertDialogAction>
              <Text>Continue</Text>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

View on Expo Go

Expo Go is a sandbox that enables you to quickly experiment with building native Android and iOS apps. It's the fastest way to get started. Download any version of it below.

Download Expo Go

Assets Panel

Each component is listed in the assets panel for easy access. We keep components visible and avoid nesting them in too many subfolders. For complex components, their building blocks are located in the respective sub-components folder.

View further documentation.

Local Styles

Local styles in Figma are available when the Design System is enabled.To apply, Select any of these presets from the Figma Local styles panel.

View further documentation.

Colour modes

You can toggle between light and dark modes by selecting the ‘Mode’ dropdown in the Figma ‘Design’ panel to the right. To apply, select Light or Dark from the Mode dropdown selector.

Badge

Buttons

Join our Community Forum

Any other questions? Get in touch