Beta v0.6.2

Documentation

Button

The Button component is used to trigger an action or event.

Import


import { Button } from "pier-ui";


Default Button


<Button>Default</Button>

Button Sizes


<Button size="sm">
Button
</Button>
<Button size="md">
Button
</Button>
<Button size="lg">
Button
</Button>
<Button size="xl">
Button
</Button>

Variants


<Button variant="primary">
Primary
</Button>
<Button variant="secondary">
Secondary
</Button>
<Button variant="third">
Third
</Button>

Button outline


<Button variant="default-outline">
Button Outline
</Button>
<Button variant="primary-outline">
Button Outline
</Button>
<Button variant="secondary-outline">
Button Outline
</Button>
<Button variant="third-outline">
Button Outline
</Button>

Width

Costum Width:

Full Width:


<Button width="130px" variant="primary">
Primary
</Button>
<Button width="100%" variant="primary">
Primary
</Button>

Disabled


<Button disabled>Disabled</Button>

Custom styled Button


import css from "styled-jsx/css";
import { Button } from "pier-ui";
const customButton = () => {
const { className, styles } = css.resolve`
.custom-style.button.primary {
background-color: rgb(139, 40, 219);
border-color: rgb(139, 40, 219);
}
.custom-style.button.primary:hover {
background-color: rgb(115, 33, 183);
border-color: rgb(115, 33, 183);
}
`;
return (
<>
<Button variant="primary" className={`custom-style ${className}`}>
Primary Custom Styles
{styles}
</Button>
</>
);
};
export default customButton;

Props

PropDescriptionTypeDefault
variantVariant of the button: "primary", "secondary" "third" as well as "outline" versions (prefixed by 'outline-*')
"outline-primary", "outline-secondary", "outline-third"		stringdefault
sizeSize of the buttonstringbase
classNameclassName for the componentstring
widthWidth of the buttonstringauto
disableddisable buttonbooleanfalse
asYou can use a custom element type for this component.elementTypebutton