KitlenoKitlenov2.0.0

Feedback / Alert

Alert

Alert components are useful for displaying important feedback, validation messages, errors, warnings and success states in user interfaces.

Alert Info

Displays neutral, informational feedback. Use for tips, hints, or guidance that does not require immediate action.

Info message here
AlertInfo.jsx
import { Info } from 'lucide-react'

export default function AlertInfo() {
  return (
    <div className="bg-[#e3f2fd] border-2 border-[#90caf9] rounded-2xl">
      <div className="py-4 px-4 flex flex-row items-center gap-4">
        <div className="text-[#1e88e5]">
          <Info />
        </div>
        <div className="text-[#1e88e5] text-lg">Info message here</div>
      </div>
    </div>
  )
}

Alert Success

Confirms that an action completed successfully. Use after form submissions, saves, or completed operations.

Success message here
AlertSuccess.jsx
import { CircleCheck } from 'lucide-react'

export default function AlertSuccess() {
  return (
    <div className="bg-[#e8f5e9] border-2 border-[#a5d6a7] rounded-2xl">
      <div className="py-4 px-4 flex flex-row items-center gap-4">
        <div className="text-[#4caf50]">
          <CircleCheck />
        </div>
        <div className="text-[#1b5e20] text-lg">Success message here</div>
      </div>
    </div>
  )
}

Alert Error

Communicates failure or blocking errors. Use when an action cannot proceed or something has gone wrong.

Error message here
AlertError.jsx
import { CircleX } from 'lucide-react'

export default function AlertError() {
  return (
    <div className="bg-[#ffebee] border-2 border-[#ef9a9a] rounded-2xl">
      <div className="py-4 px-4 flex flex-row items-center gap-4">
        <div className="text-[#e53935]">
          <CircleX />
        </div>
        <div className="text-[#b71c1c] text-lg">Error message here</div>
      </div>
    </div>
  )
}

Alert Warning

Signals potential issues or cautionary states. Use when the user may need to reconsider an action.

Warning message here
AlertWarning.jsx
import { TriangleAlert } from 'lucide-react'

export default function AlertWarning() {
  return (
    <div className="bg-[#fff3e0] border-2 border-[#ffcc80] rounded-2xl">
      <div className="py-4 px-4 flex flex-row items-center gap-4">
        <div className="text-[#f57c00]">
          <TriangleAlert />
        </div>
        <div className="text-[#e65100] text-lg">Warning message here</div>
      </div>
    </div>
  )
}