D3vugu-components/components/input/button.vugu

<button vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238 " + c.classes}' @click="c.HandleClick(event)">
	<div class="d3c-1633424238-highlighter"></div><vg-comp expr="c.IconSlot"></vg-comp><vg-comp expr="c.DefaultSlot"></vg-comp>
</button>

<style>
	.d3c-1633424238 {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5em;
		text-decoration: none;
		padding: 0.3em 0.5em;
		/*margin: 0.5em 0;*/
		border-radius: 4px;
		border: 1px solid var(--d3c-color-border);
		background-color: var(--d3c-color-background);
		color: var(--d3c-color-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 1em;
		font-family: "Segoe UI", sans-serif;
		min-height: 2em;
		user-select: none;
	}

	.d3c-button-vertical .d3c-1633424238, .d3c-button-vertical.d3c-1633424238 {
		flex-direction: column;
	}

	.d3c-button-borderless .d3c-1633424238, .d3c-button-borderless.d3c-1633424238 {
		border: none;
	}

	.d3c-1633424238-highlighter {
		position: absolute;
		border-radius: 2px;
		height: 4px;
		left: 0.5em;
		right: 0.5em;
		bottom: 0;
	}

	.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {
		background-color: var(--d3c-color-accent) !important;
	}

	.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {
		display: none;
	}

	.d3c-1633424238:hover {
		background-color: var(--d3c-color-hovered);
	}

	.d3c-1633424238:active {
		background-color: var(--d3c-color-activated);
	}

	.d3c-1633424238:focus-visible {
		outline: 2px solid var(--d3c-color-accent);
	}
</style>

<script type="application/x-go">
	import (
		"git.d3nexus.de/Dadido3/D3vugu-components/utils"
	)
</script>