Alert

Features:

• Color
• Icon
• Closable
• Action
• Loading

Usage

<script setup>
import { Alert } from 'gurunkit';
</script>

<template>
  <Alert>Alert Message</Alert>
</template>

Alert Message

Color

Set alert color using color props. Supported values: primary, light, error, warning, success.

It's also supports dark mode, enable it by adding dark class to html tag.

<script setup>
import { Alert } from 'gurunkit';
</script>

<template>
  <Alert color="primary">Primary Alert</Alert>
  <Alert color="warning">Warning Alert</Alert>
  <Alert color="error">Error Alert</Alert>
  <Alert color="light">Light Alert</Alert>
  <Alert color="success">Success Alert</Alert>
</template>

Primary Alert

Warning Alert

Error Alert

Light Alert

Success Alert

Icon

Display an icon using the icon slot.

TIP

We don't provide an icon library. You can use any icon library you prefer. For example, you can use Iconify.

<script setup>
import { Alert } from 'gurunkit';
</script>

<template>
  <Alert color="warning">
    <template #icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
      >
        <path d="M0 0h24v24H0z" fill="none" />
        <path
          fill="currentColor"
          d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2m.01 13l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7"
        />
      </svg>
    </template>
    Alert with icon
  </Alert>
</template>

Alert with icon

Close

Add the closable prop to display a close icon at the end of the alert. Clicking the icon emits the close event.

<script setup>
import { Alert } from 'gurunkit';

const onClose = () => alert('close');
</script>

<template>
  <Alert color="error" closable @close="onClose">
    <template #icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
      >
        <path d="M0 0h24v24H0z" fill="none" />
        <path
          fill="currentColor"
          d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2m.01 13l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7"
        />
      </svg>
    </template>
    Alert closable
  </Alert>
</template>

Alert closable

Loading

Display a spinner when loading props is true.

WARNING

If loading is true, the icon slot will not be rendered.

<script setup>
import { Alert } from 'gurunkit';
</script>

<template>
  <Alert color="primary" loading> Alert loading </Alert>
</template>

Alert loading

Action

Add the action slot to display content at the end of the alert.

WARNING

If closable is true, the close button will not be rendered.

<script setup>
import { Alert, Button } from 'gurunkit';
</script>

<template>
  <Alert color="primary">
    <template #action>
      <Button size="sm"> Action </Button>
    </template>
    Alert with action
  </Alert>
</template>

Alert with action

API

Props

Name	Type	Required	Default	Description
color	primary, light, success, warning, error	❌	primary	Alert color
closable	boolean	❌	false	Display a close button
loading	boolean	❌	false	Display a loading spinner

Slots

Name	Data	Description
default	-	Render alert text
icon	-	Render alert icon
action	-	Render alert action

Events

Name	Type	Description
Close	-	Close button clicked