Skip to main content
Version: 1.0.0

Atom components

Atoms are core UI components that are re-used in all of our modals.

Input#

import React from "react";
import { Input } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Input placeholder="Input field" />
</div>
);
};

Props#

label#

string

The input label.

required#

boolean

Adds a "*" beside the label.

id#

string

Input id, also added to the htmlFor label attribute.

error#

string

Will add an error paragraph at the bottom of the input & display the error styling.

errorId#

string

The error paragraph id.

className#

string

Appended to the input field className attribute.

labelClassName#

string

Appended to the label className attribute.

errorClassName#

string

Appended to the error paragraph className attribute.

wrapperClassName#

string

Appended to the input wrapper className attribute.

info

Also accepts any prop that HTML input element supports.

Button#

import React from "react";
import { Button } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Button>Button</Button>
</div>
);
};

Props#

variant#

"solid"|"outline"|"icon"|"ghost"

The button style varient, default is "solid".

icon#

Element

Prefixes the button with an icon.

isLoading#

boolean

Triggers loading & disable state.

disabled#

boolean

Triggers disabled state.

className#

string

Appended to the button className attribute.

info

Also accepts any prop that HTML button element supports.

Checkbox#

import React from "react";
import { Checkbox } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Checkbox>Checkbox</Checkbox>
</div>
);
};

Props#

className#

string

Appended to the checkbox className attribute.

labelClassName#

string

Appended to the label className attribute.

id#

string

The checkbox element id.

info

Also accepts any prop that HTML input element supports.

Radio#

import React from "react";
import { Radio } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Radio>Radio</Radio>
</div>
);
};

Props#

className#

string

Appended to the radio className attribute.

labelClassName#

string

Appended to the label className attribute.

id#

string

The radio element id.

info

Also accepts any prop that HTML input element supports.

DatePicker#

import React from "react";
import { DatePicker } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<DatePicker />
</div>
);
};

Props#

label#

string

The input label.

required#

boolean

Adds a "*" beside the label.

id#

string

Input id, also added to the htmlFor label attribute.

error#

string

Will add an error paragraph at the bottom of the input & display the error styling.

errorId#

string

The error paragraph id.

className#

string

Appended to the input field className attribute.

labelClassName#

string

Appended to the label className attribute.

errorClassName#

string

Appended to the error paragraph className attribute.

wrapperClassName#

string

Appended to the input wrapper className attribute.

info

Also accepts any prop that HTML input element supports.

Link#

import React from "react";
import { Link } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Link href="#">Link</Link>
</div>
);
};

Props#

href#

string

The anchor tag href.

isButton#

boolean

Sets the anchor role as button.

className#

string

Appended to the anchor tag className attribute.

info

Also accepts any prop that anchor element supports.

Select#

import React from "react";
import { Select } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Select>
<option value="1" selected>
option 1
</option>
<option value="2">option 2</option>
</Select>
</div>
);
};

Props#

label#

string

The input label.

required#

boolean

Adds a "*" beside the label.

id#

string

Input id, also added to the htmlFor label attribute.

error#

string

Will add an error paragraph at the bottom of the input & display the error styling.

errorId#

string

The error paragraph id.

className#

string

Appended to the input field className attribute.

labelClassName#

string

Appended to the label className attribute.

errorClassName#

string

Appended to the error paragraph className attribute.

wrapperClassName#

string

Appended to the select wrapper className attribute.

info

Also accepts any prop that HTML input element supports.

Modal#

Used to create custom modals.

import React from "react";
import { Modal, ModalBody, ModalFooter } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomModal = () => {
return (
<div className="pelcro-root">
<Modal id="custom modal">
<ModalBody>Body</ModalBody>
<ModalFooter>Footer</ModalFooter>
</Modal>
</div>
);
};
CustomModal.viewId = "custom-modal";

Props#

id#

string

Modal container id attribute, also used in analytics to identify the modal.

onDisplay#

() ⇒ void

Callback function called when the modal is first displayed.

onClose#

() ⇒ void

Callback function called when the modal is closed.

className#

string

Appended to the modal container className attribute.

hideCloseButton#

boolean

Hides the modal's close button when true.