Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Notification

- Components
- Notification

## Basic Notification

Code

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. Check out code for detail of usage.

      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a simple notification'})"
      >
        Default
      </button>

## Notification Variants

Code

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. Check out code for detail of usage.

      <button
        class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
        @click="$notification({text:'This is a simple notification',variant:'primary'})"
      >
        Primary
      </button>
      <button
        class="btn bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
        @click="$notification({text:'This is a simple notification',variant:'secondary'})"
      >
        Secondary
      </button>
      <button
        class="btn bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
        @click="$notification({text:'This is a simple notification',variant:'info'})"
      >
        Info
      </button>
      <button
        class="btn bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
        @click="$notification({text:'This is a simple notification',variant:'success'})"
      >
        Success
      </button>
      <button
        class="btn bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
        @click="$notification({text:'This is a simple notification',variant:'warning'})"
      >
        Warning
      </button>
      <button
        class="btn bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
        @click="$notification({text:'This is a simple notification',variant:'error'})"
      >
        Error
      </button>
      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
        @click="$notification({text:'This is a simple notification',variant:'light'})"
      >
        Light
      </button>
      <button
        class="btn bg-navy-500 font-medium text-slate-200 hover:bg-navy-450 focus:bg-navy-450 active:bg-navy-450/90"
        @click="$notification({text:'This is a simple notification',variant:'dark'})"
      >
        Dark
      </button>

## Notification Position

Code

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. Check out code for detail of usage.

      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a left top notification',variant:'info',position:'left-top'})"
      >
        Left Top
      </button>
      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a left bottom notification',variant:'info',position:'left-bottom'})"
      >
        Left Bottom
      </button>
      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a center top notification',variant:'info',position:'center-top'})"
      >
        Center Top
      </button>
      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a center bottom notification',variant:'info',position:'center-bottom'})"
      >
        Center Bottom
      </button>
      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a right top notification',variant:'info',position:'right-top'})"
      >
        Right Top
      </button>
      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a right bottom notification',variant:'info',position:'right-bottom'})"
      >
        Right Bottom
      </button>

## Notification Duration

Code

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. Check out code for detail of usage.

      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({text:'This is a simple notification',variant:'info',duration:3000})"
      >
        3 Seconds
      </button>

## Custom HTML Content

Code

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. Check out code for detail of usage.

      <button
        class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        @click="$notification({content:'#custom-html-notif',duration:3000})"
      >
        HTML content
      </button>
      <template id="custom-html-notif">
        <div
          class="flex max-w-xs overflow-hidden rounded-lg bg-navy-600 font-normal"
        >
          <div class="flex items-start p-4">
            <div class="avatar size-10">
              <img
                class="rounded-full"
                src="images/200x200.png"
                alt="avatar"
              />
              <div
                class="absolute right-0 size-3 rounded-full border-2 border-navy-600 bg-primary dark:bg-accent"
              ></div>
            </div>
          </div>
          <div class="p-2">
            <div class="flex items-center justify-between space-x-2">
              <h5
                class="font-medium tracking-wide text-navy-100 line-clamp-1 lg:text-base"
              >
                Message Header
              </h5>
              <button
                data-notification-remove
                class="btn size-7 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  ></path>
                </svg>
              </button>
            </div>
            <p class="text-navy-100">Lorem ipsum dolor sit amet, consectetur</p>
            <div class="flex justify-end px-3 py-1">
              <a href="#" class="uppercase text-accent-light hover:underline"
                >show</a
              >
            </div>
          </div>
        </div>
      </template>