HugoBlox-kit/modules/blox/layouts/_shortcodes/button.html

{{/*
  Button Shortcode for Hugo Blox Kit
  
  Docs: https://docs.hugoblox.com/content/writing-markdown-latex/
  
  Parameters
  ----------
  url : required
      Button destination URL (internal or external)
  text : optional
      Button text content (overrides .Inner)
  new_tab : optional, default false
      Whether to open link in new tab:
      - false: Open in same tab (default)
      - true: Open in new tab
  style : optional, default "primary"
      Button style variant:
      - "primary": Primary gradient (default)
      - "secondary": Secondary gradient
      - "outline": Outlined style
      - "ghost": Minimal ghost style
  size : optional, default "md"
      Button size:
      - "sm": Small button
      - "md": Medium button (default)
      - "lg": Large button
      - "xl": Extra large button
  align : optional, default "left"
      Button alignment on page:
      - "left": Left-aligned (default)
      - "center": Center-aligned
      - "right": Right-aligned
  icon : optional
      Icon name to display alongside text
  icon_position : optional, default "left"
      Icon position relative to text:
      - "left": Icon before text (default)
      - "right": Icon after text
  rounded : optional, default "md"
      Button border radius:
      - "sm": Small radius
      - "md": Medium radius (default)
      - "lg": Large radius
      - "xl": Extra large radius
      - "full": Fully rounded (pill shape)
  disabled : optional, default false
      Whether button should be disabled
  
  Examples
  --------
  {{< button url="/contact" >}}Contact Us{{< /button >}}
  {{< button url="https://example.com" new_tab="true" style="secondary" >}}External Link{{< /button >}}
  {{< button url="/download" text="Download Now" icon="download" style="primary" size="lg" align="center" >}}
  {{< button url="#section" style="outline" rounded="full" icon="arrow-right" icon_position="right" >}}Learn More{{< /button >}}
*/}}

{{- $url := .Get "url" | default "#" -}}
{{- $text := .Get "text" | default (.Inner | markdownify | plainify) -}}
{{- $newTab := .Get "new_tab" | default false -}}
{{- $style := .Get "style" | default "primary" -}}
{{- $size := .Get "size" | default "md" -}}
{{- $align := .Get "align" | default "left" -}}
{{- $icon := .Get "icon" -}}
{{- $iconPosition := .Get "icon_position" | default "left" -}}
{{- $rounded := .Get "rounded" | default "md" -}}
{{- $disabled := .Get "disabled" | default false -}}

{{/* Set target and rel attributes based on new_tab parameter */}}
{{- $targetAttr := "" -}}
{{- $relAttr := "" -}}
{{- $isExternal := or (strings.HasPrefix $url "http://") (strings.HasPrefix $url "https://") -}}

{{- if $newTab -}}
  {{- $targetAttr = "_blank" -}}
  {{- if $isExternal -}}
    {{- $relAttr = "noopener noreferrer" -}}
  {{- else -}}
    {{- $relAttr = "noopener" -}}
  {{- end -}}
{{- else if $isExternal -}}
  {{- $relAttr = "noreferrer" -}}
{{- end -}}

{{/* Alignment classes */}}
{{- $alignClass := "" -}}
{{- if eq $align "center" -}}
  {{- $alignClass = "text-center" -}}
{{- else if eq $align "right" -}}
  {{- $alignClass = "text-right" -}}
{{- else -}}
  {{- $alignClass = "text-left" -}}
{{- end -}}

{{/* Size classes */}}
{{- $sizeClasses := "" -}}
{{- if eq $size "sm" -}}
  {{- $sizeClasses = "px-3 py-1.5 text-sm" -}}
{{- else if eq $size "lg" -}}
  {{- $sizeClasses = "px-6 py-3 text-lg" -}}
{{- else if eq $size "xl" -}}
  {{- $sizeClasses = "px-8 py-4 text-xl" -}}
{{- else -}}
  {{- $sizeClasses = "px-4 py-2 text-base" -}}
{{- end -}}

{{/* Rounded classes */}}
{{- $roundedClass := "" -}}
{{- if eq $rounded "sm" -}}
  {{- $roundedClass = "rounded" -}}
{{- else if eq $rounded "lg" -}}
  {{- $roundedClass = "rounded-xl" -}}
{{- else if eq $rounded "xl" -}}
  {{- $roundedClass = "rounded-2xl" -}}
{{- else if eq $rounded "full" -}}
  {{- $roundedClass = "rounded-full" -}}
{{- else -}}
  {{- $roundedClass = "rounded-lg" -}}
{{- end -}}

{{/* Style classes */}}
{{- $styleClasses := "" -}}
{{- $baseClasses := "inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none" -}}

{{- if eq $style "secondary" -}}
  {{- $styleClasses = "bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50" -}}
{{- else if eq $style "outline" -}}
  {{- $styleClasses = "bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50" -}}
{{- else if eq $style "ghost" -}}
  {{- $styleClasses = "bg-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 active:bg-primary-100 dark:active:bg-primary-950 hover:scale-105 active:scale-95 focus:ring-primary-500/50" -}}
{{- else -}}
  {{/* Primary gradient (default) */}}
  {{- $styleClasses = "bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50" -}}
{{- end -}}

{{/* Generate unique ID for button */}}
{{ $id := delimit (slice "button" (partial "functions/uid.html" .)) "-" }}

<div class="{{ $alignClass }}">
  <a
    id="{{ $id }}"
    href="{{ $url }}"
    {{ with $targetAttr }}target="{{ . }}"{{ end }}
    {{ with $relAttr }}rel="{{ . }}"{{ end }}
    {{ with $disabled }}{{ if . }}disabled aria-disabled="true"{{ end }}{{ end }}
    class="{{ $baseClasses }} {{ $styleClasses }} {{ $sizeClasses }} {{ $roundedClass }}"
    role="button"
    {{ with $text }}aria-label="{{ . | plainify }}"{{ end }}
  >
    {{/* Icon before text */}}
    {{ if and $icon (eq $iconPosition "left") }}
      <span class="flex-shrink-0">
        {{ partial "functions/get_icon" (dict "name" $icon "attributes" "class=\"w-4 h-4\"") }}
      </span>
    {{ end }}
    
    {{/* Button text */}}
    <span>{{ $text }}</span>
    
    {{/* Icon after text */}}
    {{ if and $icon (eq $iconPosition "right") }}
      <span class="flex-shrink-0">
        {{ partial "functions/get_icon" (dict "name" $icon "attributes" "class=\"w-4 h-4\"") }}
      </span>
    {{ end }}
  </a>
</div>