button — Univerzální tlačítko s variantami (primary, ghost, link) a velikostmi

app/components/Button/button.latte 
{*
	Univerzální tlačítko.

	Parametry:
	- $variant (string): primary|ghost|link (default primary)
	- $size (string): sm|md|lg (default md)
	- $type (string): button|submit (default button)
	- $href (string|null): pokud zadán, rendruje <a> místo <button>
	- $disabled (bool): default false
	- $label (string): text tlačítka
*}
{var $variant = $variant ?? 'primary'}
{var $size = $size ?? 'md'}
{var $classes = "btn btn--$variant btn--$size"}

{if isset($href)}
	<a href="{$href}" class="{$classes}">{$label}</a>
{else}
	<button type="{$type ?? 'button'}" class="{$classes}" n:attr="disabled: $disabled ?? false">
		{$label}
	</button>
{/if}
resources/sass/components/_button.scss 
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.15s, color 0.15s;
	text-decoration: none;

	&--primary {
		background: $cgui-color-primary;
		color: white;

		@include cgui-hover() {
			background: darken($cgui-color-primary, 8%);
		}
	}

	&--ghost {
		background: transparent;
		color: $cgui-color-text;
		border: 1px solid $cgui-color-border;

		@include cgui-hover() {
			background: $cgui-color-bg-hover;
		}
	}

	&--link {
		background: transparent;
		color: $cgui-color-primary;
		padding: 0;

		@include cgui-hover() {
			text-decoration: underline;
		}
	}

	&--sm { padding: 4px 10px; font-size: 0.85em; }
	&--md { padding: 8px 16px; font-size: 1em; }
	&--lg { padding: 12px 24px; font-size: 1.1em; }

	&[disabled] {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}
}