Alert (TAlert)

VueJs Alert component with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.


Basic example

<t-alert variant="error" show>
  Something goes wrong
Something goes wrong


PropertyTypeDefault valueDescription
tagNameString'div'The tag used as wrapper
bodyTagNameString'div'The tag that wraps the alert text
dismissibleBooleantrueIf the alert can be closed and has close button
showBooleanfalseIf the alert should be shown
timeoutNumberundefinedTime in milliseconds before the alert is auto hidden
classesObject{...} (see below)The default CSS classes
fixedClassesObject{...} (see below)The default CSS Fixed classes shared for all variants
variantsObjectundefinedThe different variants of classes the component have
variant[String, Object]undefinedThe variant that should be used

Classes and variants format

This component expects an object with classes named after every child element.

The properties in that object are the following:

wrapperWrapper of the alert
bodyWrapper of the text
closeClose button
closeIconClose button svg icon


  fixedClasses: {
    wrapper: 'relative flex items-center p-4 border-l-4  rounded shadow-sm',
    body: 'flex-grow',
    close: 'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
    closeIcon: 'fill-current h-4 w-4'
  classes: {
    wrapper: 'bg-blue-50 border-blue-500',
    body: 'text-blue-700',
    close: 'text-blue-500 hover:bg-blue-200'
  variants: {
    danger: {
      wrapper: 'bg-red-50 border-red-500',
      body: 'text-red-700',
      close: 'text-red-500 hover:bg-red-200'
    success: {
      wrapper: 'bg-green-50 border-green-500',
      body: 'text-green-700',
      close: 'text-green-500 hover:bg-green-200'


shown-Emitted when the alert is shown
hidden-Emitted when alert is hidden


defaultContent of the alert
closeContent of the dismiss button

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.