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
To use this package, you must install the @pikas-ui/styles package.
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
This component is used to show a message to make the user aware of something.
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>
)
}
Prop | Description | Type | Default |
---|---|---|---|
variant | Alert variant of the alert component | AlertVariant | "info" |
children | Alert content | ReactNode | - |
fontSize | Font size of the alert component | PikasFontSize | "em-small" |
fontWeight | Font weight of the alert component | PikasFontWeight | "normal" |
borderRadius | Border radius of the alert component | PikasRadius | "md" |
iconSize | Icon size of the alert component | number | 24 |
padding | Padding of the alert component | AlertPadding | "md" |
gap | Gap of the alert component | AlertGap | "sm" |
visible | Visibility of the alert component | boolean | true |
css | Custom css of the alert component | AlertCSS | - |
You can use this component to create a custom alert component.
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>
)
}
Prop | Description | Type | Default |
---|---|---|---|
children | Alert content | ReactNode | - |
fontSize | Font size of the alert component | PikasFontSize | "em-small" |
fontWeight | Font weight of the alert component | PikasFontWeight | "normal" |
borderRadius | Border radius of the alert component | PikasRadius | "md" |
iconSize | Icon size of the alert component | number | 24 |
padding | Padding of the alert component | AlertPadding | "md" |
gap | Gap of the alert component | AlertGap | "sm" |
Icon | Icon of the alert component | FC<IconProps> | - |
backgroundColorName | Background color of the alert component | PikasColors | - |
colorName | Color of the alert component | PikasColors | - |
visible | Visibility of the alert component | boolean | true |
css | Custom css of the alert component | AlertCSS | - |
This documentation can be edited on GitHub here