---
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',
        'py-0 px-0' => view:size === 'xs',
        'px-4' => view:size === 'sm',
        'px-5' => view:size === 'md',
        'px-6' => view:size === 'lg',
        'py-1' => view:size === 'sm',
        'py-2' => view:size === 'md',
        'py-4' => view:size === 'lg',
        'text-base' => view:size === 'xs',
        'text-sm' => view:size === 'sm',
        'text-base' => view:size === 'md',
        'text-lg' => view:size === 'lg',
        'font-semibold',
        'text-primary-500',
        'text-primary-500' => view:color === 'primary',
        'text-secondary-500' => view:color === 'secondary',
        'text-tertiary-500' => view:color === 'tertiary',
        'text-quaternary-500' => view:color === 'quaternary',
        'text-white' => view:color === 'white',
        'underline',
        'underline-offset-4',
        'hover:no-underline',
        'group-hover:no-underline',
        '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 | collapse_whitespace }}"
    >
    {{ slot ?? label }}
</{{ view:tag }}>