CascadeKit
SectionsHow it worksPricingDocs
Sign inGet the library
Button Link
npx cascadekit add button-link
Files
snippets/button-link.liquid
Copied!
{%- liquid
  assign button_variant = variant | default: 'primary'
  assign button_href = href | default: '#'
  assign button_classes = 'inline-flex min-h-11 items-center justify-center rounded-md px-6 py-3 text-sm font-semibold no-underline transition-colors'

  case button_variant
    when 'secondary'
      assign button_classes = button_classes | append: ' border border-white bg-transparent text-white hover:bg-white hover:text-black'
    when 'tertiary'
      assign button_classes = button_classes | append: ' px-0 text-white underline underline-offset-4 hover:no-underline'
    when 'transparent'
      assign button_classes = button_classes | append: ' border border-white/60 bg-black/20 text-white hover:bg-black/35'
    else
      assign button_classes = button_classes | append: ' bg-white text-black hover:bg-white/90'
  endcase
-%}

<a href="{{ button_href }}" class="{{ button_classes }}">
  {{- text | escape -}}
</a>