Pikas UI

@pikas-ui/button

This package contains a button components and a button link components.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/button

yarn add @pikas-ui/button

pnpm add @pikas-ui/button

Usage

Button

This component is a button component that can be used to trigger an action. You can put an icon inside the button using the LeftIcon or RightIcon props.

import { Button } from '@pikas-ui/button';

const Example: React.FC = () => <Button>Click me</Button>;

Props

Props extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Description	Type	Default
`children`	The content of the button.	`ReactNode`	-
`type`	The type of the button.	`ButtonTarget`	`"button"`
`colorName`	The color of the button.	`PikasColors`	`"primary"`
`colorHex`	The color of the button (hex).	`string`	-
`contentColorName`	The color of the content of the button.	`PikasColors`	-
`contentColorHex`	The color of the content of the button (hex).	`string`	-
`css`	The css of the button.	`ButtonCSS`	-
`padding`	The padding of the button.	`ButtonPadding`	`"md"`
`loading`	If the button is loading.	`boolean`	`false`
`disabled`	If the button is disabled.	`boolean`	`false`
`borderRadius`	The border radius of the button.	`PikasRadius`	`"md"`
`fontSize`	The font size of the button.	`PikasFontSize`	`"em-base"`
`textTransform`	The text transform of the button.	`ButtonTextTransform`	`"default"`
`fontWeight`	The font weight of the button.	`PikasFontWeight`	`"normal"`
`effect`	The effect of the button when hovered or clicked.	`ButtonEffect`	`"opacity"`
`onClick`	The function to call on click.	`function`	-
`gap`	The gap of the button.	`ButtonGap`	`"md"`
`LeftIcon`	The left icon of the button.	`FC<IconProps>`	-
`RightIcon`	The right icon of the button.	`FC<IconProps>`	-
`outlined`	If the button is outlined.	`boolean`	`false`
`borderWidth`	The border width of the button.	`number`	`2`
`width`	The width of the button.	`string or number`	`"100%"`
`maxWidth`	The max width of the button.	`string or number`	`"100%"`
`minWidth`	The min width of the button.	`string or number`	-
`boxShadow`	The box shadow of the button.	`PikasShadow or 'none"`	`"bottom-sm"`

ButtonLink

This component is a button link component that can be used to trigger an action. You can put an icon inside the button using the LeftIcon or RightIcon props.

Primary

Secondary

Tertiary

import { ButtonLink } from '@pikas-ui/button';

const Example: React.FC = () => <ButtonLink href="#">Click me</ButtonLink>;

Props

Props extends AnchorHTMLAttributes<HTMLAnchorElement>

Prop	Description	Type	Default
`children`	The content of the button.	`ReactNode`	-
`colorName`	The color of the button.	`PikasColors`	`"primary"`
`colorHex`	The color of the button (hex).	`string`	-
`contentColorName`	The color of the content of the button.	`PikasColors`	-
`contentColorHex`	The color of the content of the button (hex).	`string`	-
`css`	The css of the button.	`ButtonCSS`	-
`padding`	The padding of the button.	`ButtonPadding`	`"md"`
`loading`	If the button is loading.	`boolean`	`false`
`disabled`	If the button is disabled.	`boolean`	`false`
`borderRadius`	The border radius of the button.	`PikasRadius`	`"md"`
`fontSize`	The font size of the button.	`PikasFontSize`	`"em-base"`
`textTransform`	The text transform of the button.	`ButtonTextTransform`	`"default"`
`fontWeight`	The font weight of the button.	`PikasFontWeight`	`"normal"`
`effect`	The effect of the button when hovered or clicked.	`ButtonEffect`	`"opacity"`
`onClick`	The function to call on click.	`function`	-
`gap`	The gap of the button.	`ButtonGap`	`"md"`
`href`	The href of the button.	`string`	-
`LeftIcon`	The left icon of the button.	`FC<IconProps>`	-
`RightIcon`	The right icon of the button.	`FC<IconProps>`	-
`outlined`	If the button is outlined.	`boolean`	`false`
`borderWidth`	The border width of the button.	`number`	`2`
`target`	The target of the button.	`ButtonTarget`	`"_self"`
`width`	The width of the button.	`string or number`	`"100%"`
`maxWidth`	The max width of the button.	`string or number`	`"100%"`
`minWidth`	The min width of the button.	`string or number`	-
`boxShadow`	The box shadow of the button.	`PikasShadow or 'none"`	`"bottom-sm"`

ButtonIcon

This component is a button icon component that can be used to trigger an action.

import { ButtonIcon } from '@pikas-ui/button';
import { IconProps, IconByName } from '@pikas-ui/icons';

const IconExample: React.FC<IconProps> = (props) => {
  return <IconByName {...props} name="bx:baguette" />;
};

const Example: React.FC = () => <ButtonIcon icon={IconExample} />;

Props

Props extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Description	Type	Default
`type`	The type of the button.	`ButtonTarget`	`"button"`
`colorName`	The color of the button.	`PikasColors`	`"primary"`
`colorHex`	The color of the button (hex).	`string`	-
`contentColorName`	The color of the content of the button.	`PikasColors`	-
`contentColorHex`	The color of the content of the button (hex).	`string`	-
`css`	The css of the button.	`ButtonCSS`	-
`padding`	The padding of the button.	`ButtonPadding`	`"md"`
`loading`	If the button is loading.	`boolean`	`false`
`disabled`	If the button is disabled.	`boolean`	`false`
`borderRadius`	The border radius of the button.	`PikasRadius`	`"md"`
`effect`	The effect of the button when hovered or clicked.	`ButtonEffect`	`"opacity"`
`onClick`	The function to call on click.	`function`	-
`outlined`	If the button is outlined.	`boolean`	`false`
`borderWidth`	The border width of the button.	`number`	`2`
`size`	The size of the button.	`Sizes`	`24`
`boxShadow`	The box shadow of the button.	`PikasShadow or 'none"`	`"bottom-sm"`

ButtonIconLink

This component is a button icon link component that can be used to trigger an action.

import { ButtonIconLink } from '@pikas-ui/button';
import { IconProps, IconByName } from '@pikas-ui/icons';

const IconExample: React.FC<IconProps> = (props) => {
  return <IconByName {...props} name="bx:baguette" />;
};

const Example: React.FC = () => <ButtonIconLink icon={IconExample} href="#" />;

Props

Props extends AnchorHTMLAttributes<HTMLAnchorElement>

Prop	Description	Type	Default
`colorName`	The color of the button.	`PikasColors`	`"primary"`
`colorHex`	The color of the button (hex).	`string`	-
`contentColorName`	The color of the content of the button.	`PikasColors`	-
`contentColorHex`	The color of the content of the button (hex).	`string`	-
`css`	The css of the button.	`ButtonCSS`	-
`padding`	The padding of the button.	`ButtonPadding`	`"md"`
`loading`	If the button is loading.	`boolean`	`false`
`disabled`	If the button is disabled.	`boolean`	`false`
`borderRadius`	The border radius of the button.	`PikasRadius`	`"md"`
`effect`	The effect of the button when hovered or clicked.	`ButtonEffect`	`"opacity"`
`onClick`	The function to call on click.	`function`	-
`href`	The href of the button.	`string`	-
`outlined`	If the button is outlined.	`boolean`	`false`
`borderWidth`	The border width of the button.	`number`	`2`
`size`	The size of the button.	`Sizes`	`6`
`target`	The target of the button.	`ButtonTarget`	`"_self"`
`boxShadow`	The box shadow of the button.	`PikasShadow or 'none"`	`"bottom-sm"`

Contributing

This documentation can be edited on GitHub here