## Usage ### React ```tsx import React from 'react'; import { KvAlert, IAlertConfig, EAlertType, EComponentSize } from '@kelvininc/react-ui-components'; export const AlertExample: React.FC = () => ( <> {/** Default info alert with required props */} {/** Error state */} {/** Success state */} {/** Warning state */} {/** With description */} {/** Hiding icon */} {/** Small size */} ) ``` ## Properties | Property | Attribute | Description | Type | Default | | -------------------- | ------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------- | | `description` | `description` | (optional) Defines the description text to show | `string` | `undefined` | | `label` _(required)_ | `label` | (required) Defines the label (title) text to show | `string` | `undefined` | | `showIcon` | `show-icon` | (optional) Defines if the icon should be shown, defaults to `true` | `boolean` | `true` | | `size` | `size` | (optional) Defines the size of the component, defaults to EComponentType.Large | `EComponentSize.Large \| EComponentSize.Small` | `EComponentSize.Large` | | `type` _(required)_ | `type` | (required) Defines the type of alert to show, possible values are defined in `EAlertType` | `EAlertType.Error \| EAlertType.Info \| EAlertType.Success \| EAlertType.Warning` | `undefined` | ## Shadow Parts | Part | Description | | ------------- | -------------------- | | `"container"` | The alert container. | ## Dependencies ### Depends on - [kv-icon](../icon) ### Graph ```mermaid graph TD; kv-alert --> kv-icon style kv-alert fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------