xtablo-source/docs/design-system/buttons.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Buttons</title>
  <link rel="stylesheet" href="../../go-backend/static/tailwind.css">
  <link rel="stylesheet" href="../../go-backend/static/styles.css">
</head>
<body>
<main class="catalog-page"><nav class="catalog-nav" aria-label="Catalog navigation"><a href="./index.html" class="catalog-home-link">Catalog</a><div class="catalog-nav-links"><a href="./tokens.html" class="catalog-nav-link">Tokens</a><a href="./buttons.html" class="catalog-nav-link is-active">Buttons</a><a href="./badges.html" class="catalog-nav-link">Badges</a><a href="./icon-buttons.html" class="catalog-nav-link">Icon Buttons</a><a href="./inputs.html" class="catalog-nav-link">Inputs</a><a href="./selects.html" class="catalog-nav-link">Selects</a><a href="./form-fields.html" class="catalog-nav-link">Form Fields</a><a href="./modals.html" class="catalog-nav-link">Modals</a><a href="./spacing.html" class="catalog-nav-link">Spacing</a><a href="./tables.html" class="catalog-nav-link">Tables</a><a href="./empty-states.html" class="catalog-nav-link">Empty States</a><a href="./cards.html" class="catalog-nav-link">Cards</a></div></nav><header class="catalog-page-header"><p class="catalog-eyebrow">Design System</p><h1>Buttons</h1><p>Primary, secondary, ghost, and destructive actions built from shared templ primitives.</p></header><div class="catalog-example-list"><section class="catalog-example"><div class="catalog-example-copy"><h2>Default solid action</h2><p>Used for the main action in a page section or modal footer.</p></div><div class="catalog-example-preview"><button type="button" class="ui-button ui-button-solid ui-button-default ui-button-md">Nouveau projet</button></div><pre class="catalog-example-snippet"><code>@ui.Button(ui.ButtonProps{
	Label:   &#34;Nouveau projet&#34;,
	Variant: ui.ButtonVariantDefault,
	Size:    ui.SizeMD,
	Type:    &#34;button&#34;,
})</code></pre></section><section class="catalog-example"><div class="catalog-example-copy"><h2>Soft warning action</h2><p>Used for inline actions that need emphasis without the weight of a solid button.</p></div><div class="catalog-example-preview"><button type="button" class="ui-button ui-button-soft ui-button-warning ui-button-md">Relancer</button></div><pre class="catalog-example-snippet"><code>@ui.Button(ui.ButtonProps{
	Label:   &#34;Relancer&#34;,
	Variant: ui.ButtonVariantWarning,
	Tone:    ui.ButtonToneSoft,
	Size:    ui.SizeMD,
	Type:    &#34;button&#34;,
})</code></pre></section><section class="catalog-example"><div class="catalog-example-copy"><h2>Soft danger action</h2><p>Used for irreversible actions after explicit confirmation.</p></div><div class="catalog-example-preview"><button type="submit" class="ui-button ui-button-soft ui-button-danger ui-button-lg">Supprimer</button></div><pre class="catalog-example-snippet"><code>@ui.Button(ui.ButtonProps{
	Label:   &#34;Supprimer&#34;,
	Variant: ui.ButtonVariantDanger,
	Tone:    ui.ButtonToneSoft,
	Size:    ui.SizeLG,
	Type:    &#34;submit&#34;,
})</code></pre></section></div></main>
</body>
</html>
feat: add go-backend design system and tablos UI 2026-05-09 18:18:24 +00:00			`<!doctype html>`
			`<html lang="fr">`
			`<head>`
			`<meta charset="utf-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
			`<title>Buttons</title>`
			`<link rel="stylesheet" href="../../go-backend/static/tailwind.css">`
			`<link rel="stylesheet" href="../../go-backend/static/styles.css">`
			`</head>`
			`<body>`
Add select component with single and multi-value support 2026-05-10 20:04:09 +00:00			<main class="catalog-page"><nav class="catalog-nav" aria-label="Catalog navigation"><a href="./index.html" class="catalog-home-link">Catalog</a><div class="catalog-nav-links"><a href="./tokens.html" class="catalog-nav-link">Tokens</a><a href="./buttons.html" class="catalog-nav-link is-active">Buttons</a><a href="./badges.html" class="catalog-nav-link">Badges</a><a href="./icon-buttons.html" class="catalog-nav-link">Icon Buttons</a><a href="./inputs.html" class="catalog-nav-link">Inputs</a><a href="./selects.html" class="catalog-nav-link">Selects</a><a href="./form-fields.html" class="catalog-nav-link">Form Fields</a><a href="./modals.html" class="catalog-nav-link">Modals</a><a href="./spacing.html" class="catalog-nav-link">Spacing</a><a href="./tables.html" class="catalog-nav-link">Tables</a><a href="./empty-states.html" class="catalog-nav-link">Empty States</a><a href="./cards.html" class="catalog-nav-link">Cards</a></div></nav><header class="catalog-page-header"><p class="catalog-eyebrow">Design System</p><h1>Buttons</h1><p>Primary, secondary, ghost, and destructive actions built from shared templ primitives.</p></header><div class="catalog-example-list"><section class="catalog-example"><div class="catalog-example-copy"><h2>Default solid action</h2><p>Used for the main action in a page section or modal footer.</p></div><div class="catalog-example-preview"><button type="button" class="ui-button ui-button-solid ui-button-default ui-button-md">Nouveau projet</button></div><pre class="catalog-example-snippet"><code>@ui.Button(ui.ButtonProps{
feat: add go-backend design system and tablos UI 2026-05-09 18:18:24 +00:00			`Label: "Nouveau projet",`
feat: refresh go-backend button variants and tablos styling 2026-05-10 07:22:22 +00:00			`Variant: ui.ButtonVariantDefault,`
feat: add go-backend design system and tablos UI 2026-05-09 18:18:24 +00:00			`Size: ui.SizeMD,`
			`Type: "button",`
feat: refresh go-backend button variants and tablos styling 2026-05-10 07:22:22 +00:00			`})</code></pre></section><section class="catalog-example"><div class="catalog-example-copy"><h2>Soft warning action</h2><p>Used for inline actions that need emphasis without the weight of a solid button.</p></div><div class="catalog-example-preview"><button type="button" class="ui-button ui-button-soft ui-button-warning ui-button-md">Relancer</button></div><pre class="catalog-example-snippet"><code>@ui.Button(ui.ButtonProps{`
			`Label: "Relancer",`
			`Variant: ui.ButtonVariantWarning,`
			`Tone: ui.ButtonToneSoft,`
			`Size: ui.SizeMD,`
			`Type: "button",`
			`})</code></pre></section><section class="catalog-example"><div class="catalog-example-copy"><h2>Soft danger action</h2><p>Used for irreversible actions after explicit confirmation.</p></div><div class="catalog-example-preview"><button type="submit" class="ui-button ui-button-soft ui-button-danger ui-button-lg">Supprimer</button></div><pre class="catalog-example-snippet"><code>@ui.Button(ui.ButtonProps{`
feat: add go-backend design system and tablos UI 2026-05-09 18:18:24 +00:00			`Label: "Supprimer",`
			`Variant: ui.ButtonVariantDanger,`
feat: refresh go-backend button variants and tablos styling 2026-05-10 07:22:22 +00:00			`Tone: ui.ButtonToneSoft,`
feat: add go-backend design system and tablos UI 2026-05-09 18:18:24 +00:00			`Size: ui.SizeLG,`
			`Type: "submit",`
			`})</code></pre></section></div></main>`
			`</body>`
			`</html>`