<!-- Chevron left -->
<button class="btn-tertiary flex-row-reverse space-x-reverse" type="button">
<span>Button</span>
<div class="inline">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
</div>
</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>