FLIN App

Basic Modal

Simple modal with a title prop and text content.

Edit Profile

Make changes to your profile here. Click save when you are done.

With Sub-components

Modal composed of ModalHeader, ModalBody, and ModalFooter for structured layouts.

Confirm Action

Are you sure you want to proceed with this action? This will update your settings.

Form Modal

Modal with form inputs and action buttons in the footer.

New Project

Usage

<Modal title="Edit Profile"> Make changes to your profile here.</Modal><Modal> <ModalHeader>Confirm Action</ModalHeader> <ModalBody>Are you sure?</ModalBody> <ModalFooter> <Button variant="ghost">Cancel</Button> <Button>Confirm</Button> </ModalFooter></Modal>

Props

Prop	Type	Default	Description
`title`	text	""	Modal header title
`children`	content	-	Modal body content

Modal

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Basic Modal

Edit Profile

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } With Sub-components

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Form Modal