<button type="button" class="border border-tertiary-200 inline-flex items-center justify-center rounded-md p-xsSpace bg-tertiary-200 text-tertiary-600 hover:bg-tertiary-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
.btn-primary {
@apply inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}
.btn-secondary {
@apply inline-flex items-center rounded-md border border-primary-500 bg-primary-100 px-4 py-2 text-base font-medium text-primary-700 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}
.btn-tertiary {
@apply inline-flex items-center font-normal no-underline text-primary-700 ring-offset-4 hover:underline focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-opacity-75;
}
.btn-primary svg,
.btn-secondary svg,
.btn-tertiary svg {
@apply h-md w-md;
}
.btn-icon {
}
.btn-icon-left {
@apply -ml-2xsSpace pr-xsSpace;
}
.btn-icon-left-sm {
@apply -ml-3xsSpace pr-3xsSpace;
}
.btn-icon-right {
@apply -mr-2xsSpace pr-xsSpace;
}
.btn-icon-right-sm {
@apply -mr-3xsSpace pl-3xsSpace;
}
.btn-sm {
@apply text-xs px-xsSpace py-2xsSpace;
}
.btn-disabled {
@apply opacity-50 pointer-events-none;
}
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D1%253A8%26t%3D66XpghXQX1sLaeCx-1
<a href="#" class="btn-primary">{{ label }}</a>