Alert (TAlert)

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

Playground:


Basic example

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

Props

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:

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

Example

{
  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'
    }
  }
}

Events

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

Slots

SlotDescription
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.