Tag (TTag)

VueJs custom HTML tag with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.


Basic example

<t-tag tag-name="h1" variant="h3">
  This is my title
  <t-tag tag-name="span" variant="badge">new</t-tag>
<t-tag tag-name="p" variant="body">This is the body of my content</t-tag>

This is my title new

This is the body of my content


PropertyTypeDefault valueDescription
tagNameString'div'The HTML tag to use
textStringundefinedText inside the HTML tag
classesObjectundefinedThe default CSS classes
fixedClassesObjectundefinedThe 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


defaultContent of the tag