Modal

When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page. You need to pass isOpen & onClose to the Modal.

Alignments

Modal can be aligned centered by passing align="center". Additionally m can be controlled as shown in utilities.

Size

Submit Modal

Avail Props
Default Value
isOpen
false
onClose
-
onEntering
-
onEnter
-
onExit
-
onExiting
-
onExited
-
p
2rem
m
{y: { xs: "1rem", lg: "2rem" }, x: { xs: "1rem", lg: "auto" }}
align
start
justify
-
flexDir
-
flexGrow
-
flexWrap
-
rounded
-
bg
-
hoverBg
-
focusBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
w
100%
maxW
32rem
minW
-
border
-
borderColor
-
hoverBorderColor
-
focusBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
4
hoverShadow
-
focusShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
default
Show More
// Basic Modal
import { Div, Button, Modal, Icon, Text } from "atomize";
const AlignStartModal = ({ isOpen, onClose }) => {
return (
<Modal isOpen={isOpen} onClose={onClose} align="start" rounded="md">
<Icon
name="Cross"
pos="absolute"
top="1rem"
right="1rem"
size="16px"
onClick={onClose}
cursor="pointer"
/>
<Div d="flex" m={{ b: "4rem" }}>
<Icon
name="AlertSolid"
color="warning700"
m={{ t: "0.35rem", r: "0.5rem" }}
/>
<Text p={{ l: "0.5rem", t: "0.25rem" }} textSize="subheader">
Do you really want to submit the request.
</Text>
</Div>
<Div d="flex" justify="flex-end">
<Button
onClick={onClose}
bg="gray200"
textColor="medium"
m={{ r: "1rem" }}
>
Cancel
</Button>
<Button onClick={onClose} bg="info700">
Yes, Submit
</Button>
</Div>
</Modal>
);
};
class BasicModal extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
}
render() {
const { showModal } = this.state;
return (
<>
<Button
bg="info700"
hoverBg="info600"
m={{ b: "1rem" }}
onClick={() => this.setState({ showModal: true })}
>
Open Basic Modal (Align Start)
</Button>
<AlignStartModal
isOpen={showModal}
onClose={() => this.setState({ showModal: false })}
/>
</>
);
}
}
export default BasicModal;

Sidedrawer

If there are too many operations to display, you can wrap them in a Dropdown. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.

Basic Sidedrawer

A basic SideDrawer need to be passed isOpen & onClose to work.

Size

SideDrawer size can be modified by passing the w props for the desired width.

Note that you need to pass an array for responsive sidebar w.

Avail Props
Default Value
isOpen
false
onClose
-
onEntering
-
onEnter
-
onExit
-
onExiting
-
onExited
-
p
1.5rem
align
-
justify
-
flexDir
-
flexGrow
-
flexWrap
-
rounded
-
bg
white
hoverBg
-
focusBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
w
{ xs: "100vw", sm: "24rem" }
maxW
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
focusBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
focusShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
-
Show More
// Basic Sidedrawer
import { Div, Button, SideDrawer, Icon, Text } from "atomize";
const BasicSideDrawer = ({ isOpen, onClose }) => {
return (
<SideDrawer isOpen={isOpen} onClose={onClose}>
<Div d="flex" m={{ b: "4rem" }}>
<Icon name="AlertSolid" color="warning700" />
<Text p={{ l: "0.5rem", t: "0.25rem" }}>This is the modal</Text>
</Div>
<Div d="flex" justify="flex-end">
<Button
onClick={onClose}
bg="gray200"
textColor="medium"
m={{ r: "1rem" }}
>
Cancel
</Button>
<Button onClick={onClose} bg="info700">
Submit
</Button>
</Div>
</SideDrawer>
);
};
class Drawer extends React.Component {
constructor(props) {
super(props);
this.state = {
showSideDrawer: false
};
}
render() {
const { showSideDrawer } = this.state;
return (
<>
<Button
bg="info700"
hoverBg="info600"
m={{ r: "0.5rem" }}
onClick={() => this.setState({ showSideDrawer: true })}
>
Show Basic Sidedrawer
</Button>
<BasicSideDrawer
isOpen={showSideDrawer}
onClose={() => this.setState({ showSideDrawer: false })}
/>
</>
);
}
}
export default Drawer;

Notification

Notification can be used to give feedbacks or short messages to the user. isOpen & onClose needs to be passed for the notification to work. In addition, prefix & suffix can be used to put icons with the notifications.

Type

Notification are of two types - auto closed & closed by users. If onClose is passed to the notification it becomes auto closed notifation.

Dark Notifications

Light Notifications

Avail Props
Default Value
isOpen
false
onClose
-
onEntering
-
onEnter
-
onExit
-
onExiting
-
onExited
-
p
1.5rem
align
-
justify
-
flexDir
-
flexGrow
-
flexWrap
-
rounded
-
bg
white
hoverBg
-
focusBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
w
{ xs: "100vw", sm: "24rem" }
maxW
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
focusBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
focusShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
-
Show More
// Auto Closed Notifiation
import { Div, Button, Notification } from "atomize";
class MyNotifation extends React.Component {
constructor(props) {
super(props);
this.state = {
showNotification: false
};
}
render() {
const { showNotification } = this.state;
return (
<>
<Button
bg="gray700"
hoverBg="gray600"
m={{ r: "0.5rem" }}
onClick={() => this.setState({ showNotification: true })}
>
Show auto close notification
</Button>
<Notification
isOpen={showNotification}
onClose={() => this.setState({ showNotification: false })}
>
This notification is self closable
</Notification>
</>
);
}
}
export default MyNotifation;