Alert

Alert messages with custom styles.

TntAlert is just a wrapper around Nuxt UI's UAlert and accepts all of the same props.

<TntAlert
  title="Title"
  description="This is an alert."
  variant="subtle"
/>

vue

Title

This is an alert.

As well as this, TntAlert defines some custom properties for quickly and easily creating some commonly used alert types.

Success

<TntAlert title="Work Saved" success />

vue

Work Saved

<TntAlert title="Coming Soon" info />

vue

Coming Soon

<TntAlert title="Oops!" warning />

vue

Oops!

<TntAlert title="Action Denied" error />

vue

Action Denied

<TntAlert title="Bigger Text and Icon" info large />

vue

Bigger Text and Icon

On this page

Hero Patterns by Steve Schoger (CC By 4.0)