Div

<Div /> is equivalent to <div />.

This is the div
Avail Props
Default Value
tag
div
align
-
justify
-
flexDir
-
flexGrow
-
flexWrap
-
order
-
rounded
-
bg
-
hoverBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
maxW
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
-
Show More
// Creating a div
import { Div } from "atomize";
<Div
bg="gray200"
d="flex"
align="center"
p="1rem"
>
This is the div
</Div>

Text

<Text /> is by default equal to <p>. To change that tag tag props can be passed to the component.

This is h1 of display1 size

Avail Props
Default Value
tag
p
flexGrow
-
order
-
bg
-
hoverBg
-
maxH
-
minH
-
maxW
-
minW
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
position
-
top
-
left
-
right
-
bottom
-
transition
-
cursor
-
Show More
// Creating a h1
import { Text } from "atomize";
<Text tag="h1" textSize="display1" m={{ b: "4rem" }}>
This is h1 of display1 size
</Text>

Icons

<Icon /> can be used to display any of the below icons. Icon accepts the props of name, color & size in adition to the available utility props.

Add
AlertSolid
Alert
Attachment
Back
Bag
Behance
BookmarkSolid
Bookmark
Bulk
CameraSolid
Camera
Card
Checked
CloseSolid
Close
Cross
DeleteSolid
Delete
Dot
DownArrowCircle
DownArrowSolid
DownArrow
Down
Download
Draft
Dribbble
EditSolid
Edit
Email
Expand
External
EyeSolid
Eye
Facebook
FolderSolid
Folder
Github
HeartSolid
Heart
History
HomeSolid2
HomeSolid
Home
InfoSolid
Info
Instagram
LeftArrowSolid
LeftArrow
LeftUp
Link
Linkedin
Loading
Loading2
Loading3
LocationSolid
Location
LockSolid
Lock
Logout
LongLeft
LongRight
Mail
MasterCard
Menu
MessageSolid
Message
Minus
Next
NotificationSolid
Notification
OptionsVertical
Options
Photo
Pause
Play
PlayNext
PlayPrev
Plus
Power
Print
QuestionSolid
Question
Refresh
RemoveSolid
Remove
Rename
RightArrowSolid
RightArrow
RightUp
Search
SettingsSolid
Settings
StarSolid
Status
Stop
Store
Success
TimestampSolid
Timestamp
Twitter
UpArrowSolid
UpArrow
Up
Upload
UserCircle
UserSolid
User
Visa
CBChecked
CBDisabled
CBIndetermine
CBUnchecked
RBChecked
RBUnchecked
Avail Props
Default Value
name
-
color
black
hoverColor
-
size
24px
order
-
position
-
top
-
left
-
right
-
bottom
-
cursor
-
Show More
// Add Icon
import { Icon } from "atomize";
<Icon name="Add" color="black" size="20px" />

Button

Any of the utility property can also be passed to Button. Button by default is of height h="2.5rem", padding p: { x: "1rem" } and uses flex to align items center. In addition to these loading & disabled having booleon value can be passed to the button.

Icon Buttons

Button Size

Button With Icon

Button Loading

Avail Props
Default Value
isLoading
false
disabled
-
prefix
-
suffix
-
p
{ x: "1rem" }
d
flex
align
center
justify
center
flexDir
-
flexGrow
-
flexWrap
-
order
-
rounded
md
bg
black
hoverBg
-
h
2.5rem
maxH
-
minH
-
maxW
-
minW
-
border
none
borderColor
-
hoverBorderColor
-
textSize
body
textWeight
500
textDecor
-
textTransform
-
textAlign
-
textColor
white
hoverTextColor
-
fontFamily
primary
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
true
overflow
-
cursor
pointer
Show More
// Icon Buttons
import { Div, Button } from "atomize";
<Div d="flex">
// Search Button
<Button
h="2.5rem"
w="2.5rem"
bg="warning700"
hoverBg="warning600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="Search" size="20px" color="white" />
</Button>
// Bookmark Button
<Button
h="2.5rem"
w="2.5rem"
bg="info700"
hoverBg="info600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="BookmarkSolid" size="20px" color="white" />
</Button>
// Delete Button
<Button
h="2.5rem"
w="2.5rem"
bg="danger700"
hoverBg="danger600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="DeleteSolid" size="20px" color="white" />
</Button>
// Play Button
<Button
h="2.5rem"
w="2.5rem"
bg="success700"
hoverBg="success600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="Play" size="20px" color="white" />
</Button>
// Heart Button
<Button
h="2.5rem"
w="2.5rem"
bg="danger300"
hoverBg="danger400"
rounded="lg"
m={{ r: "1rem" }}
>
<Icon name="HeartSolid" size="20px" color="danger700" />
</Button>
// Camera Button
<Button
h="2.5rem"
w="2.5rem"
bg="info300"
hoverBg="info400"
rounded="lg"
m={{ r: "1rem" }}
>
<Icon name="CameraSolid" size="20px" color="info700" />
</Button>
// Message Button
<Button
h="2.5rem"
w="2.5rem"
bg="success300"
hoverBg="success400"
rounded="lg"
m={{ r: "1rem" }}
>
<Icon name="MessageSolid" size="20px" color="success700" />
</Button>
// Attachment Button
<Button
h="2.5rem"
w="2.5rem"
bg="info300"
hoverBg="info400"
rounded="lg"
m={{ r: "1rem" }}
>
<Icon name="Attachment" size="20px" color="info700" />
</Button>
</Div>

Input & Textarea

Any of the utility property can also be passed to Input. Input by default is of height h="2.5rem", padding p: { x: "0.75rem" }, and uses flex to align items center.

Avail Props
Default Value
isLoading
-
prefix
-
suffix
-
p
{ x: "0.75rem" }
d
flex
flexGrow
-
order
-
rounded
md
bg
white
hoverBg
-
focusBg
-
h
2.5rem
maxH
-
minH
-
w
100%
maxW
-
minW
-
border
1px solid
borderColor
gray500
hoverBorderColor
-
focusBorderColor
gray700
textSize
body
textWeight
500
textDecor
-
textTransform
-
textAlign
-
textColor
dark
hoverTextColor
-
focusTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
focusShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
true
overflow
-
cursor
-
Show More
// Basic Input
import { Input } from "atomize";
const BasicInput = () => {
return (
<Input placeholder="Basic Input" />
);
}

Checkbox

To make the area clickable for <Checkbox /> changes, the area is wrapped inside<Label />.

You should manage the checked states with react states.

You can also change the size, inactiveColor & activeColor of the Checkbox.

isLoading can be passed if the value of checkbox is loading.

Avail Props
Default Value
isLoading
false
disabled
false
undetermine
false
activeColor
info700
inactiveColor
gray500
size
20px
m
{ r: "0.5rem" }
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
cursor
pointer
Show More
// Basic Checkboxes
import { Checkbox, Label } from "atomize";
const BasicCheckboxes = () => {
return (
<>
<Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
<Checkbox /> Normal Checkbox
</Label>
<Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
<Checkbox disabled /> Disabled
</Label>
<Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
<Checkbox undetermine /> Undetermine
</Label>
</>
);
}

Radiobox

To make the area clickable for <Radiobox /> changes, the area is wrapped inside<Label />.

Manage radios with react States.

You can also change the size, inactiveColor & activeColor of the Radiobox.

isLoading can be passed if the value of Radiobox is loading.

Avail Props
Default Value
isLoading
false
disabled
false
activeColor
info700
inactiveColor
gray500
size
20px
m
{ r: "0.5rem" }
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
cursor
pointer
Show More
// Managing through State
import { Radiobox, Label, Div } from "atomize";
class ManagingRadioboxWithState extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedCountValue: 1
};
this.toggleSelectedCount = this.toggleSelectedCount.bind(this);
}
toggleSelectedCount(value) {
this.setState({
selectedCountValue: value,
})
}
render() {
const { selectedCountValue} = this.state;
return (
<Div d="flex">
<Label
align="center"
textWeight="600"
m={{ b: "0.5rem", r: "2rem" }}
>
<Radiobox
onChange={() => this.toggleSelectedCount(1)}
checked={ selectedCountValue === 1 }
name="count"
/>
1
</Label>
<Label
align="center"
textWeight="600"
m={{ b: "0.5rem", r: "2rem" }}
>
<Radiobox
onChange={() => this.toggleSelectedCount(2)}
checked={ selectedCountValue === 2 }
name="count"
/>
2
</Label>
<Label
align="center"
textWeight="600"
m={{ b: "0.5rem", r: "2rem" }}
>
<Radiobox
onChange={() => this.toggleSelectedCount(3)}
checked={ selectedCountValue === 3 }
name="count"
/>
3
</Label>
<Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
<Radiobox
onChange={() => this.toggleSelectedCount(4)}
checked={ selectedCountValue === 4 }
name="count"
/>
4
</Label>
</Div>
);
}
}

Switch

Switch works exactly like checkbox, except it can only be managed through state.

You can style the active and inactive state of switch by using activeColor, inactiveColor, activeShadow & inactiveShadow.

isLoading can be passed for the loading state of the switch.

Avail Props
Default Value
isLoading
false
disabled
false
activeColor
info700
inactiveColor
gray500
activeShadow
4
inactiveShadow
0
m
{ r: "1rem" }
cursor
pointer
Show More
// Basic Switches
import { Switch, Label } from "atomize";
class Switches extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedSwitchValue1: false,
selectedSwitchValue2: false
};
}
render() {
const { selectedSwitchValue1, selectedSwitchValue2 } = this.state;
return (
<Label
onClick={() =>
this.setState({ selectedSwitchValue1: !selectedSwitchValue1 })
}
align="center"
textWeight="600"
m={{ b: "1rem" }}
>
<Switch
checked={selectedSwitchValue1}
/>
Normal Switch
</Label>
);
}
}

Image

You can use <Image src="image/url" /> for rendering an image component, or if you want to maintain a constant ratio you can use it in background like<Div bgImg="image/url" bgSize="cover" />

Avail Props
Default Value
flexGrow
-
order
-
rounded
-
maxH
-
minH
-
w
100%
maxW
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
cursor
-
Show More
// Images
import { Image, Div, Row, Col } from "atomize";
const BasicImages = () => {
return (
<Row>
<Col>
<Image src="https://images.unsplash.com/photo-1559963629-38ed0fbd4c86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" />
</Col>
<Col>
<Div
bgImg="https://images.unsplash.com/photo-1559963629-38ed0fbd4c86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
bgSize="cover"
bgPos="center"
h="20rem"
/>
</Col>
</Row>
);
}

Tags

Tag for categorizing or markup.

Tag 1LinkCloseEditLink

You can pass any utility props to define how the Tag should look like. Below are bordered custom tags.

CustomTagCustomTagCustomTagCustomTagCustomTagCustomTag

You can also change the padding, border radius and textSize of the Tags as shown below.

SolidSolidSolidSolidSolidSolid
Avail Props
Default Value
tag
span
prefix
-
suffix
-
p
{ x: "0.5rem", y: "0.125rem" }
d
inline-flex
align
center
justify
center
flexDir
-
flexGrow
-
flexWrap
-
order
-
rounded
sm
bg
gray300
hoverBg
-
maxH
-
minH
-
maxW
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
textSize
caption
textWeight
500
textDecor
-
textTransform
-
textAlign
center
textColor
medium
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
-
Show More
// Basic Tags
import { Div, Tag, Anchor, Icon } from "atomize";
const BasicTags = () => {
return (
<Div d="flex">
<Tag m={{ r: "1rem", b: "1rem" }}>Tag 1</Tag>
<Tag m={{ r: "1rem", b: "1rem" }}>Link</Tag>
<Tag
m={{ r: "1rem", b: "1rem" }}
suffix={
<Icon
name="Cross"
size="12px"
m={{ l: "1rem" }}
cursor="pointer"
/>
}
>
Close
</Tag>
<Tag
m={{ r: "1rem", b: "1rem" }}
prefix={<Icon name="Edit" size="12px" m={{ r: "0.25rem" }} />}
>
Edit
</Tag>
<Anchor href="https://www.google.com" target="_blank">
<Tag
hoverBg="info200"
m={{ r: "1rem", b: "1rem" }}
prefix={<Icon name="Link" size="12px" m={{ r: "0.25rem" }} />}
cursor="pointer"
>
Link
</Tag>
</Anchor>
</Div>
);
}

Anchor

<Anchor/> is equilant to <a/> and can be passed most of the utilities as props. Underline is removed by default. You can pass textDecor="underline" to get that underlined link.

You can also wrap any div, tag or button inside an anchor.

Avail Props
Default Value
order
-
bg
-
hoverBg
-
maxH
-
minH
-
maxW
-
minW
-
textSize
-
textWeight
500
textDecor
none
textTransform
-
textAlign
-
textColor
info700
hoverTextColor
info800
fontFamily
-
position
-
top
-
left
-
right
-
bottom
-
transition
-
cursor
pointer
Show More
// Basic Links
import { Div, Tag, Anchor, Icon } from "atomize";
const BasicLinks = () => {
return (
<>
<Anchor
href="https://www.google.com"
target="_blank"
d="block"
m={{ b: "1rem" }}
>
This is the link
</Anchor>
<Anchor
href="https://www.google.com"
target="_blank"
textDecor="underline"
d="block"
>
This is the underlined link
</Anchor>
</>
);
}

Collapse

<Collapse /> can be used when you need to show/hide some element. isOpen props define the state of the component.

This
section
is
inside
collapse
Avail Props
Default Value
isOpen
false
m
{ y: 0 }
align
-
justify
-
flexDir
-
flexGrow
-
flexWrap
-
rounded
-
bg
-
hoverBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
maxW
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
hidden
cursor
-
Show More
// Basic Links
import { Div, Tag, Anchor, Icon } from "atomize";
class Collapse extends React.Component {
constructor(props) {
super(props);
this.state = {
showCollapse: false
};
}
render() {
const { selectedCode, showCollapse } = this.state;
return (
<>
<Button
onClick={() => this.setState({ showCollapse: !showCollapse })}
m={{ b: "1rem" }}
>
Toggle Collapse
</Button>
<Collapse isOpen={showCollapse}>
<Div
bg="gray100"
border="1px solid"
borderColor="gray400"
rounded="lg"
>
{["This", "section", "is", "inside", "collapse"].map(
(name, index) => (
<Div
p={{ x: "1rem", y: "0.75rem" }}
border={{ b: index !== 4 && "1px solid" }}
borderColor="gray400"
>
{name}
</Div>
)
)}
</Div>
</Collapse>
</>
);
}
}