Dcode Design System

Button: Primary With Icon Right

README.md file loading in testing

<!-- Chevron left -->
<button class="btn-primary btn-icon " type="button">
    <span>Button</span>

    <div class="btn-icon-right">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
        </svg>
    </div>
</button>
  • Content: 
    .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;
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: components/03-elements/button/button.scss
  • Size: 1.2 KB
  • Content: 
    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
  • URL: /components/raw/button/figma.txt
  • Filesystem Path: components/03-elements/button/figma.txt
  • Size: 178 Bytes
  • Content: 
    <a href="#" class="btn-primary">{{ label }}</a>
  • URL: /components/raw/button/vue.html
  • Filesystem Path: components/03-elements/button/vue.html
  • Size: 47 Bytes