@pikas-ui/alert

This package contains a Alert component that can be used to show a message to make the user aware of something.

This library is based on Radix Ui.

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/alert
yarn add @pikas-ui/alert
pnpm add @pikas-ui/alert

Usage

Alert

This component is used to show a message to make the user aware of something.

This is an danger alert.
This is a success alert.
This is a warning alert.
This is an info alert.
import { Alert } from "@pikas-ui/alert";

const Example: React.FC = () => {
  return (
    <Alert variant="alert">
      Ea Lorem fugiat aliquip irure aliquip quis mollit ullamco aliquip occaecat culpa.
    </Alert>
  )
}

Props

PropDescriptionTypeDefault
variantAlert variant of the alert componentAlertVariant"info"
childrenAlert contentReactNode-
fontSizeFont size of the alert componentPikasFontSize"em-small"
fontWeightFont weight of the alert componentPikasFontWeight"normal"
borderRadiusBorder radius of the alert componentPikasRadius"md"
iconSizeIcon size of the alert componentnumber24
paddingPadding of the alert componentAlertPadding"md"
gapGap of the alert componentAlertGap"sm"
visibleVisibility of the alert componentbooleantrue
cssCustom css of the alert componentAlertCSS-

CustomAlert

You can use this component to create a custom alert component.

This is an danger alert.
import { CustomAlert } from "@pikas-ui/alert";
import type { IconProps } from '@pikas-ui/icons'

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

const Example: React.FC = () => {
  return (
    <CustomAlert
      Icon={IconExample}
      colorName="white"
      backgroundColorName="secondary"
    >
      This is an error alert.
    </CustomAlert>
  )
}

Props

PropDescriptionTypeDefault
childrenAlert contentReactNode-
fontSizeFont size of the alert componentPikasFontSize"em-small"
fontWeightFont weight of the alert componentPikasFontWeight"normal"
borderRadiusBorder radius of the alert componentPikasRadius"md"
iconSizeIcon size of the alert componentnumber24
paddingPadding of the alert componentAlertPadding"md"
gapGap of the alert componentAlertGap"sm"
IconIcon of the alert componentFC<IconProps>-
backgroundColorNameBackground color of the alert componentPikasColors-
colorNameColor of the alert componentPikasColors-
visibleVisibility of the alert componentbooleantrue
cssCustom css of the alert componentAlertCSS-

Contributing

This documentation can be edited on GitHub here