Pikas UI

@pikas-ui/badge

This package contains a badge component that can be used to show a notification or a label.

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/badge

yarn add @pikas-ui/badge

pnpm add @pikas-ui/badge

Usage

Badge

The badge component can be used to show a notification or a label.

Bread

import { Badge } from '@pikas-ui/badge';
import { IconByName, IconProps } from '@pikas-ui/icons';

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

const Example: React.FC = () => {
  return <Badge LeftIcon={IconExample}>Bread</Badge>;
};

Props

Props extends HTMLAttributes<HTMLDivElement>.

Prop	Description	Type	Default
`children`	The content of the badge.	`ReactNode`	-
`colorName`	The color of the badge.	`PikasColors`	`"primary"`
`colorHex`	The color of the badge.	`string`	-
`boxShadow`	The shadow of the badge.	`PikasShadow`	`"bottom-sm"`
`borderRadius`	The border radius of the badge.	`PikasRadius`	`"full"`
`css`	The css of the badge.	`PikasCSS`	-
`fontSize`	The font size of the badge.	`PikasFontSize`	`"em-base"`
`LeftIcon`	The left icon of the badge.	`FC<IconProps>`	-
`RightIcon`	The right icon of the badge.	`FC<IconProps>`	-
`leftIconProps`	The left icon props.	`IconProps`	-
`rightIconProps`	The right icon props.	`IconProps`	-
`gap`	The gap of the badge.	`BadgeGap`	`"md"`
`padding`	The padding of the badge.	`BadgePadding`	`"md"`

BadgeIcon

The badge icon component can be used to show a notification or a label with an icon.

import { BadgeIcon } from '@pikas-ui/badge';
import { IconByName, IconProps } from '@pikas-ui/icons';

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

const Example: React.FC = () => {
  return <BadgeIcon Icon={IconExample} />;
};

Props

Props extends HTMLAttributes<HTMLDivElement>.

Prop	Description	Type	Default
`Icon`	The icon of the badge.	`LeftIcon`	required
`iconProps`	The icon props of the badge.	`IconProps`	-
`children`	The content of the badge.	`ReactNode`	-
`colorName`	The color of the badge.	`PikasColors`	`"primary"`
`colorHex`	The color of the badge.	`string`	-
`boxShadow`	The shadow of the badge.	`PikasShadow`	`"bottom-sm"`
`borderRadius`	The border radius of the badge.	`PikasRadius`	`"full"`
`css`	The css of the badge.	`PikasCSS`	-
`size`	The size of the badge.	`number`	`24`
`padding`	The padding of the badge.	`BadgePadding`	`"md"`

CustomBadge

You can use the custom badge component to create your own badge.

Hello world

import { CustomBadge } from '@pikas-ui/badge';

const Example: React.FC = () => {
  return (
    <CustomBadge
      css={{
        fontSize: '$em-small',
        padding: '8px 16px',
      }}
    >
      Hello world
    </CustomBadge>
  );
};

Props

Props extends HTMLAttributes<HTMLDivElement>.

Prop	Description	Type	Default
`children`	The content of the badge.	`ReactNode`	-
`colorName`	The color of the badge.	`PikasColors`	`"primary"`
`colorHex`	The color of the badge.	`string`	-
`boxShadow`	The shadow of the badge.	`PikasShadow`	`"bottom-sm"`
`borderRadius`	The border radius of the badge.	`PikasRadius`	`"full"`
`css`	The css of the badge.	`PikasCSS`	-

Contributing

This documentation can be edited on GitHub here