Alert

The alert component represents an alert.

Success! Your changes have been saved

This is an alert with icon, title and description.

Installation

Copy and paste the following file into your project.

ui/alert.hop

<component name="alert-title" class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">
  Success! Your changes have been saved
</component>

<component name="alert-description" class="text-zinc-700 col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed">
  This is an alert with icon, title and description.
</component>

<component name="alert" class="bg-white text-black relative w-full rounded-lg border border-zinc-200 px-4 py-3 text-sm grid grid-cols-[0_1fr] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
  <render component="alert-title"></render>
  <render component="alert-description"></render>
</component>

Usage

main.hop

<import component="alert" from="ui/alert">

<component name="main" class="grid w-full max-w-xl items-start gap-4">
    <render component="alert"></render>
</component>