Alert Alert informs users about important events.
Usage import { Alert } from 'stwui' ;
import Alert from 'stwui/alert' ; <script lang="ts" >
import { Alert } from 'stwui' ;
</script>
<Alert type ="info" >
<Alert.Title slot ="title" > Title</Alert.Title >
</Alert > <Alert type ="warn" >
<Alert.Title slot ="title" > Title</Alert.Title >
</Alert > <Alert type ="success" >
<Alert.Title slot ="title" > Title</Alert.Title >
</Alert > <Alert type ="error" >
<Alert.Title slot ="title" > Title</Alert.Title >
</Alert > With Description Preview
Code
<script lang="ts" >
import { Alert } from 'stwui' ;
const info = "svg-path" ;
const alert = "svg-path" ;
const check_circle = "svg-path" ;
const alert_circle = "svg-path" ;
</script>
<Alert type ="info" class ="w-full" >
<Alert.Leading slot ="leading" data ={info} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
</Alert > <Alert type ="warn" class ="w-full" >
<Alert.Leading slot ="leading" data ={alert} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
</Alert > <Alert type ="success" class ="w-full" >
<Alert.Leading slot ="leading" data ={check_circle} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
</Alert > <Alert type ="error" class ="w-full" >
<Alert.Leading slot ="leading" data ={alert_circle} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
</Alert > <script lang="ts" >
import { Alert } from 'stwui' ;
const info = "svg-path" ;
const alert = "svg-path" ;
const check_circle = "svg-path" ;
const alert_circle = "svg-path" ;
</script>
<Alert type ="info" class ="w-full" >
<Alert.Leading slot ="leading" data ={info} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Extra slot ="extra" >
<Button type ="primary" >
Action
<Button.Trailing slot ="trailing" data ={arrow_right} />
</Button >
</Alert.Extra >
</Alert > <Alert type ="warn" class ="w-full" >
<Alert.Leading slot ="leading" data ={alert} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Extra slot ="extra" >
<Button type ="primary" >
Action
<Button.Trailing slot ="trailing" data ={arrow_right} />
</Button >
</Alert.Extra >
</Alert > <Alert type ="success" class ="w-full" >
<Alert.Leading slot ="leading" data ={check_circle} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Extra slot ="extra" >
<Button type ="primary" > Action</Button >
</Alert.Extra >
</Alert > <Alert type ="error" class ="w-full" >
<Alert.Leading slot ="leading" data ={alert_circle} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Extra slot ="extra" >
<Button type ="primary" > Action</Button >
</Alert.Extra >
</Alert > The Kitchen Sink Preview
Code
<script lang="ts" >
import { Alert } from 'stwui' ;
const info = "svg-path" ;
const alert = "svg-path" ;
const check_circle = "svg-path" ;
const alert_circle = "svg-path" ;
</script>
<Alert type ="info" class ="w-full max-w-lg m-auto" >
<Alert.Leading slot ="leading" data ={info} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
<Alert.Extra slot ="extra" >
<Button type ="primary" >
Action
<Button.Trailing slot ="trailing" data ={arrow_right} />
</Button >
</Alert.Extra >
</Alert > <Alert type ="warn" class ="w-full max-w-lg m-auto" >
<Alert.Leading slot ="leading" data ={alert} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
<Alert.Extra slot ="extra" >
<Button type ="primary" >
Action
<Button.Trailing slot ="trailing" data ={arrow_right} />
</Button >
</Alert.Extra >
</Alert > <Alert type ="success" class ="w-full max-w-lg m-auto" >
<Alert.Leading slot ="leading" data ={check_circle} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
<Alert.Extra slot ="extra" >
<Button type ="primary" >
Action
<Button.Trailing slot ="trailing" data ={arrow_right} />
</Button >
</Alert.Extra >
</Alert > <Alert type ="error" class ="w-full max-w-lg m-auto" >
<Alert.Leading slot ="leading" data ={alert_circle} />
<Alert.Title slot ="title" > Title</Alert.Title >
<Alert.Description slot ="description" > I am a description</Alert.Description >
<Alert.Extra slot ="extra" >
<Button type ="primary" >
Action
<Button.Trailing slot ="trailing" data ={arrow_right} />
</Button >
</Alert.Extra >
</Alert > Alert Props type 'info' | 'warn' | 'success' | 'error' info
Alert Slots leading <Alert.Leading slot="leading" /> Copy
title <Alert.Title slot="title" /> Copy
description <Alert.Description slot="description" /> Copy
extra <Alert.Extra slot="extra" /> Copy
Alert.Leading Props data string (IconData) viewBox string 0 0 24 24 size string 24px width string 24px height string 24px color string currentColor stroke string | undefined fill string currentColor
Alert Class Identifiers stwui-alert stwui-alert-leading stwui-alert-title-description-wrapper stwui-alert-title stwui-alert-description stwui-alert-extra
