---
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',
        'bg-transparent',
        'px-4' => view:size === 'sm',
        'px-5' => view:size === 'md',
        'px-6' => view:size === 'lg',
        'py-2' => view:size === 'sm',
        'py-3' => view:size === 'md',
        'py-4' => view:size === 'lg',
        'text-base' => view:size === 'sm',
        'text-lg' => view:size === 'md',
        'text-xl' => view:size === 'lg',
        'font-semibold',
        'text-center',
        'ring-1',
        'ring-inset',
        'text-primary-500 ring-primary-500' => view:color === 'primary',
        'text-secondary-500 ring-secondary-500' => view:color === 'secondary',
        'text-tertiary-500 ring-tertiary-500' => view:color === 'tertiary',
        'text-quaternary-500 ring-quaternary-500' => view:color === 'quaternary',
        'text-white ring-white' => view:color === 'white',
        'hover:bg-primary-500 hover:text-white' => view:color === 'primary',
        'hover:bg-secondary-500 hover:text-primary-500' => view:color === 'secondary',
        'hover:bg-tertiary-500 hover:text-primary-500' => view:color === 'tertiary',
        'hover:bg-quaternary-500 hover:text-primary-500' => view:color === 'quaternary',
        'hover:bg-white hover:text-primary-500' => view:color === 'white',
        'group-hover:bg-primary-900',
        'group-hover:text-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 }}>