APA Component Library

Button: Variants 

<a class="btn cursor-pointer inline-flex items-center  bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

    <span class="shrink-0">
        I am the label
    </span>

</a>

<a class="btn cursor-pointer inline-flex items-center  bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

    <span class="shrink-0">
        Unsere Produkte entdecken
    </span>

    <span class="inline-flex items-center w-4 h-4    ms-9 ">
        Template "src/assets/icons/arrow-inverted.svg" is not defined.
    </span>

</a>

<a class="btn cursor-pointer inline-flex items-center  bg-primary justify-between text-white py-2 px-4 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

    <span class="shrink-0">
        alle Jobangebote
    </span>

</a>

<a class="btn cursor-pointer inline-flex items-center  bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

    <span class="inline-flex items-center w-4 h-4     ">
        Template "src/assets/icons/arrow-inverted.svg" is not defined.
    </span>

</a>
 
{% include '@button' with {
    label: "I am the label",
    style: 'primary',
    size: 'default'
} %}

{% include '@button' with {
    label: "Unsere Produkte entdecken",
    style: 'primary',
    size: 'default',
    icon: {
        name: 'arrow-inverted',
        classes: 'ms-9'
    }
} %}

{% include '@button' with {
    label: "alle Jobangebote",
    style: 'primary',
    size: 'sm'
} %}

{% include '@button' with {
    label: "",
    style: 'primary',
    size: 'even',
    icon: {
        name: 'arrow-inverted'
    }
} %}
 
{
  "label": "Button"
}

No notes defined.