Prompt utilisé pour régénérer cette page :
Page: Buttons — Theme Button & Shortcode Test Page
Category: theme-debugger
Description: "Test des boutons et du shortcode button"
Icon: "gesture-tap-button"
Tags: ["design", "css", "typography"]
No status field.
Front matter (index.md):
---
title: "Buttons"
description: "Test des boutons et du shortcode button"
icon: "gesture-tap-button"
tags: ["design", "css", "typography"]
---
Directory structure:
- index.md — page content (pure HTML + Hugo shortcodes)
- _fragment.left.md — left sidebar navigation widget
No JS, no CSS files. All button styles come from the theme's global CSS.
=== _fragment.left.md (left sidebar widget) ===
Front matter: title="Navigation", weight=100, _build: render: never, list: never
Content: H5 "Theme Components" + bulleted list of 9 links:
- [Buttons](/theme-debugger/theme-button/)
- [Container](/theme-debugger/theme-container/)
- [Forms](/theme-debugger/theme-form/)
- [Headers](/theme-debugger/theme-header/)
- [Panic](/theme-debugger/theme-panic/)
- [Tables](/theme-debugger/theme-table/)
- [Tags](/theme-debugger/theme-tag/)
- [Typography](/theme-debugger/theme-typography/)
- [Variables](/theme-debugger/theme-variables/)
=== Body content (index.md) — 5 section.section.full.visual blocks ===
Section 1:
- H3 "Types de boutons":
- a.button (text "a.button") + button.button (text "button.button")
- H3 "Couleurs (outline)":
- 14 a.button.color-{name} elements for colors: red, orange, yellow, lime, olive, green, teal, aqua, blue, navy, purple, fuchsia, maroon, silver
- H3 "Couleurs (fill)":
- Same 14 colors with additional .fill class: a.button.fill.color-{name}
- H3 "Aliases semantiques (outline)":
- 6 button.button.color-{alias}: danger, warning, notice, success, info, muted
- H3 "Aliases semantiques (fill)":
- Same 6 aliases with .fill class
- H3 "Tailles":
- 3 sizes with color-blue: a.button.small ("small"), a.button ("normal"), a.button.large ("large")
Section 2 — "Icone seule":
- table.typo-table with thead (th.typo-col-grow "Rendu" + th.typo-col-nowrap "Shortcode") + tbody:
- Row 1: {{< button icon="cog" color="blue" >}} | code showing shortcode
- Row 2: {{< button icon="cog" color="blue" filled=true >}} | code showing shortcode
Section 3 — "Etats":
- table.typo-table:
- Row 1: {{< button label="normal" color="blue" >}} | code
- Row 2: {{< button label="disabled" color="blue" disabled=true >}} | code
Section 4 — "Shortcode":
- table.typo-table with 5 rows:
- {{< button label="Button" >}} — basic button
- {{< button label="With icon" icon="check" color="success" >}} — with icon
- {{< button label="Filled" color="danger" filled=true icon="alert-circle-outline" >}} — filled with icon
- {{< button label="Small" color="blue" size="small" >}} — small size
- {{< button label="Large" color="blue" size="large" >}} — large size
Section 5 — "Alignement":
- Two <p> rows testing visual alignment:
- Outline row: text-only + icon+text + icon-only (all color="blue")
- Filled row: same 3 variants (color="green", filled=true)
Shortcodes used:
- {{< button label="Text" color="blue" >}}
- {{< button label="Icon" icon="check" color="blue" >}}
- {{< button icon="cog" color="blue" >}}
- {{< button label="Text" color="green" filled=true >}}
- {{< button label="Icon" icon="check" color="green" filled=true >}}
- {{< button icon="cog" color="green" filled=true >}}
Code display in tables uses HTML entities for shortcode syntax:
{{< button ... >}} inside <code> tags.
Table classes: .typo-table, .typo-col-grow (flexible width), .typo-col-nowrap (no wrap).
Button CSS classes: .button (base), .fill (filled mode), .small/.large (sizes), .color-{name} (color variants).
Button shortcode parameters: label, icon, color, filled (bool), size ("small"/"large"), disabled (bool).
Page entièrement générée et maintenue par IA, sans intervention humaine.