Button

Button #

Button is an extension to standard input element with icons and theming.

import { PButton } from 'pearkit';

Basic #

The text to be displayed on the button is defined on the button using the label property.

<PButton label={"Button"}/>

Variants #

There are 3 types of variants for buttons. text, outlined and basic, basic is selected by default.

<PButton label="Button"/>
<PButton variant="outlined" label="Button"/>
<PButton variant="text" label="Button"/>

Link #

If you want to use it as a button link, just pass the href value as the prop. Also, the target property is _target by default, this value can also be sent as a prop.

Google Google Google

<PButton href="https://www.google.com" label="Google"/>
<PButton href="https://www.google.com" variant="outlined" label="Google"/>
<PButton href="https://www.google.com" variant="text" label="Google"/>

Icon #

For more flexible use, you can send your icons as components.You can put icons at the beginning and end of the button content. For this you use the startIcon and endIcon props. If you do not submit content, only your icon will appear.

<PButton startIcon={<Icon icon="mdi:check"/>}/>
<PButton startIcon={<Icon icon="mdi:check"/>}/>
<PButton endIcon={<Icon icon="mdi:check"/>}/>

Loading #

You can send a boolean type value to the button components prop named isLoading. If prop is true, the button will be disabled

<PButton isLoading={true} label="Submit"/>

Color #

Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. sky red indigo

<PButton color="indigo" label="Button"/>
<PButton color="yellow" label="Button"/>
<PButton color="sky" label="Button"/>

Disabled #

You can give a bool value to disable the button.

<PButton disabled label="Button"/>

Raised #

Raised buttons display a shadow to indicate elevation.

<PButton raised label="Button"/>
<PButton raised variant="outlined" label="Button"/>
<PButton raised variant="text" label="Button"/>

Rounded #

Rounded buttons have a circular border radius.

<PButton rounded label="Button"/>
<PButton rounded variant="outlined" label="Button"/>
<PButton rounded variant="text" label="Button"/>

Sizes #

5 types of size units are used. The base one is assigned by default. The other four are xs, sm, lg and xl.

<PButton size="lg" label="Button"/>

Button Group #

The buttons can be grouped by wrapping them with the PButtonGroup component. They need to be immediate children. All the standard button variants are supported.

<PButtonGroup>
    <PButton label="One"/>
    <PButton label="Two"/>
    <PButton label="Three"/>
</PButtonGroup>
<PButtonGroup>
    <PButton variant="outlined" label="One"/>
    <PButton variant="outlined" label="Two"/>
    <PButton variant="outlined" label="Three"/>
</PButtonGroup>
<PButtonGroup>
    <PButton variant="text" label="One"/>
    <PButton variant="text" label="Two"/>
    <PButton variant="text" label="Three"/>
</PButtonGroup>

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the button.

Name	Type	Default	Description
variant	string \| basic \| outlined \| text	basic	Variants of the component.
color	string \| Tailwind Color Names	blue	Colors of the component.
size	string \| xs \| sm \| base \| lg \| xl	base	Sizes of the component.
isLoading	boolean \| true \| false	false	The component is used for loading status control.
label	string	Empty	Label of the component.
startIcon	ReactNode	null	To put an icon at the beginning of a component.
endIcon	ReactNode	null	To put an icon at the end of the component.
animation	boolean \| true \| false	true	Component is used for animation state control.
raised	boolean \| true \| false	true	Control of the change the component raised design.
rounded	boolean \| true \| false	true	Control of the change the component rounded design.

Badge

Card