Sistema de Diseño
Inicio / Front-end / Botones

Botones

El Kit Digital ofrece un set de estilos para botones de acción, con variaciones de tamaño y estado. Para links se debe utilizar siempre con la etiqueta <a>.

Estilos

Ejemplo
HTML
<div class="flex gap-16">
  <button class="udec-button">Primary</button>
  <button class="udec-button udec-button--outline">Outline</button>
  <button class="udec-button udec-button--secondary">Secondary</button>
  <button class="udec-button udec-button--text">Text</button>
	<button class="udec-button udec-button--rounded">Rounded</button>
</div>

Tamaños

Ejemplo
HTML
<div class="flex gap-16" style="align-items: center;">
  <button class="udec-button udec-button--small">Button Small</button>
  <button class="udec-button">Button Default</button>
  <button class="udec-button udec-button--large">Button Large</button>
</div>

Botones con íconos

Ejemplo
HTML
<div class="flex gap-16">
	<button class="udec-button udec-button--icon">
		<span>Con ícono</span>
		<span class="udec-button__icon">
			<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M18.2563 23.077L17.3127 22.118L22.764 16.6666H6.66666V15.3333H22.764L17.3127 9.88197L18.2563 8.92297L25.3333 16L18.2563 23.077Z"></path>
			</svg>
		</span>
	</button>
	<button class="udec-button udec-button--icon udec-button--outline">
		<span>Outline con ícono</span>
		<span class="udec-button__icon">
			<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M18.2563 23.077L17.3127 22.118L22.764 16.6666H6.66666V15.3333H22.764L17.3127 9.88197L18.2563 8.92297L25.3333 16L18.2563 23.077Z"></path>
			</svg>
		</span>
	</button>
	<button class="udec-button udec-button--icon udec-button--text">
		<span>Text con ícono</span>
		<span class="udec-button__icon">
			<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M18.2563 23.077L17.3127 22.118L22.764 16.6666H6.66666V15.3333H22.764L17.3127 9.88197L18.2563 8.92297L25.3333 16L18.2563 23.077Z"></path>
			</svg>
		</span>
	</button>
</div>

Estados

Ejemplo
HTML
<div class="flex gap-16">
	<button class="udec-button">Normal</button>
	<button class="udec-button" disabled>Disabled</button>
</div>