Lite UI | Alert

Guide

Installation

Design Principles

Components

Lite UI

Guide

Components

Alert

Alert is used to display messages that require attention.

Import

import { Alert } from '@ma9pie/lite-ui';

Source

components/Alert.tsx

Examples

Status

success

info

warn

error

import { Alert } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col gap-4">
      <Alert status="success">success</Alert>
      <Alert status="info">info</Alert>
      <Alert status="warn">warn</Alert>
      <Alert status="error">error</Alert>
    </div>
  );
};

export default App;

Icon

Alert

import { Alert } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col gap-4">
      <Alert>Alert</Alert>
      <Alert iconSize={28}>Alert</Alert>
      <Alert hideIcon>Alert</Alert>
    </div>
  );
};

export default App;

API

Alert props

Property	Type	Description	Default
status	success \| info \| warn \| error	Type of Alert styles.	"success"
iconSize	number	Size of icon.	20
hideIcon	boolean	Hide icon.	false
children	ReactNode	Alert content.	-

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Made by ma9pie

Deployed on