# Gomb elem

> A Gomb elem beállításai: felirat, méret, stílus, kör és körvonal, link és ikon.

A **Gomb** elem kattintható gombot hoz létre, állítható méretekkel, stílusokkal és opcionális ikonnal.

![A Gomb elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-button.webp)

*A Gomb elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Tartalom** fül három szakasza látszik: a gomb alapbeállításai, a **Link** és az **Ikon** szakasz.

## Alapbeállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Szöveg | A gomb felirata. | „I am a button” |
| **HTML-címke** | A gomb HTML-címkéje. Linkbeállításnál automatikusan `a`-ra vált. | `span` |
| **Méret** | Előre definiált méret (például `sm`, `md`, `lg`). A választható értékek a sablonstílusoktól függenek. | Alapértelmezett |
| **Stílus** | Színstílus a sablonstílusokból, például `primary`, `secondary`, `success`, `danger`. | `primary` (**Elsődleges**) |
| **Kör** | Kör alakú gomb, jellemzően csak ikonos gombhoz. | Ki |
| **Körvonal** | Kitöltés helyett körvonalas megjelenés. | Ki |

## Link

A **Link** szakasz **Hivatkozás típusa** mezőjével adod meg, hova mutasson a gomb: a link típusa, az URL és az attribútumok (például új lapon nyíljon-e). Amint linket adsz meg, a HTML-címke `a` lesz.

## Ikon

Az **Ikon** szakaszban ikont rendelhetsz a gombhoz az ikontárból.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Ikon | Az ikon kiválasztása. | Nincs |
| Tipográfia | Az ikon stílusa. Csak kiválasztott ikonnál látszik. | Nincs |
| Pozíció | Az ikon helye a szöveghez képest: `left` (balra) vagy `right` (jobbra). | `right` |
| Térköz | Az ikon és a szöveg közti távolság. | Nincs |
| Tér elosztása | Az ikont és a szöveget a gomb két szélére tolja. | Ki |