---
tag: button
type: submit
color: primary
size: md
---
<{{ view:tag }}
    {{ if view:tag == 'button' }}type="{{ view:type }}"{{ /if }}
    {{ if view:tag == 'a' }}href="{{ href }}"{{ /if }}
    class="{{ [
        'inline-block',
        'rounded-md',
        'px-4' => view:size === 'sm',
        'px-5' => view:size === 'md',
        'px-6' => view:size === 'lg',
        'py-2' => view:size === 'sm',
        'py-2.5' => view:size === 'md',
        'py-3' => view:size === 'lg',
        'text-base' => view:size === 'sm',
        'text-lg' => view:size === 'md',
        'text-xl' => view:size === 'lg',
        'font-semibold',
        'text-center',
        'bg-primary-500 text-white' => view:color === 'primary',
        'bg-secondary-500 text-primary-500' => view:color === 'secondary',
        'bg-tertiary-500 text-primary-500' => view:color === 'tertiary',
        'bg-quaternary-500 text-primary-500' => view:color === 'quaternary',
        'bg-white text-primary-500' => view:color === 'white',
        'hover:bg-primary-900' => view:color === 'primary',
        'hover:bg-secondary-900 hover:text-white' => view:color === 'secondary',
        'hover:bg-tertiary-900 hover:text-tertiary-500' => view:color === 'tertiary',
        'hover:bg-quaternary-900 hover:text-quaternary-500' => view:color === 'quaternary',
        'hover:bg-primary-500 hover:text-white' => view:color === 'white',
        'group-hover:bg-white group-hover:text-primary-500' => view:color === 'primary',
        'group-hover:bg-primary-500 group-hover:text-secondary-500' => view:color === 'secondary',
        'group-hover:bg-primary-500 group-hover:text-tertiary-500' => view:color === 'tertiary',
        'group-hover:bg-primary-500 group-hover:text-quaternary-500' => view:color === 'quaternary',
        'group-hover:bg-primary-500 group-hover:text-white' => view:color === 'white',
        'focus-visible:outline-solid',
        'focus-visible:outline-2',
        'focus-visible:outline-offset-2',
        'focus-visible:outline-primary-500' => view:color === 'primary',
        'focus-visible:outline-secondary-500' => view:color === 'secondary',
        'focus-visible:outline-tertiary-500' => view:color === 'tertiary',
        'focus-visible:outline-quaternary-500' => view:color === 'quaternary',
        'focus-visible:outline-white' => view:color === 'white',
        classes
    ] | classes | collapse_whitespace }}"
>
    {{ slot ?? label }}
</{{ view:tag }}>
