{{/* 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" .)) "-" }}
{{/* Icon before text */}} {{ if and $icon (eq $iconPosition "left") }} {{ partial "functions/get_icon" (dict "name" $icon "attributes" "class=\"w-4 h-4\"") }} {{ end }} {{/* Button text */}} {{ $text }} {{/* Icon after text */}} {{ if and $icon (eq $iconPosition "right") }} {{ partial "functions/get_icon" (dict "name" $icon "attributes" "class=\"w-4 h-4\"") }} {{ end }}