---
title: "Button"
description: "The Button Component can be used to display a Button to link to other Content. Button can be Primary or Secondary Buttons and correct Icons are coming automatically."
path: https://www.eonshowroom.eon.com/en/content-elements/button.html
lastModified: 2024-11-19T07:52:36.504Z
---

# Button

# Button

[Primary Button](https://www.eonshowroom.eon.com/en/content-elements/button.html)

[How to Configure](#how-to)

[Secondary Button](https://www.eonshowroom.eon.com/en/content-elements/button.html)

### Description

The Button Component can be used to display a Button to link to other Content.

- Primary or Secondary Button are available
- Correct Icons for Social Media Links, Phone and Mail Links are coming automatically if it is configured correctly
- Also Buttons for Downloads are possible

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/navigation-button--interactive)

### Inspirations

#### Hidden content Popup overlay (Modal)

[Modal ID: nobutton]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

[External Link (to Storybook)](https://storybook.web-ui.eon.com/eon/master/?path=/story/navigation-button--interactive)

**open Modal**

[Phone Button](tel:+4912345)

[Mail Button](mailto:abc123@eon.com)

[Download Button](https://www.eonshowroom.eon.com/content/dam/foundationNG/600_400.png)

[Pinterest Button](https://www.pinterest.de/)

[Twitter Button](https://twitter.com/explore)

[YouTube Button](https://www.youtube.com/?gl=DE)

[Instagram Button](https://www.instagram.com/?hl=de)

[Snapchat Button](https://www.snapchat.com/l/de-de/)

### Usage Rules & Features

##### Features

- Correct Icons for Social Media Button Links, Phone, and Mail Button Links are coming automatically, if it is configured correctly
- Internal Button Links are always coming without any Icon, while External Links are always coming with special External Link Icon

##### Properties

- Different Icon Alignments possible: Trailing or Leading

##### Design

- Additional Color Schemes are available
- Order Button by using Primary and Secondary Button Rank

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | in Edge Cases |
| 3 | yes |
| 4 | yes |
| 5 | yes |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | yes |

##### DO's

- Use Buttons to give more emphasize to this Destination of the Linking Element than a normal Link does

##### DONT's

- Do not use more than one Primary Button next to each other, but combine it with Secondary Buttons
- Do not use hard coded Links with http(s) for internal Button Links, as this will come with External Link Icon

## Configuration

## Trackable Component

This Component can be tracked.

[Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha)

![Configure Button as Type Link](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/button_link%3A3-4?fmt=webp)

### Configure Button as Type Link

At first, Editor needs to choose Button Type. Button Type can be Link or Modal.

If Type Link is selected, Editor can enter a Text for the Button. Moreover, Editor can add a Title for it.

To configure the Button, Editor need to enter the Path the Button should lead to in Button URL Field. It can be an external or internal Link, as well as a Phone or Mail Link.

Furthermore, a Path to a File for Download is possible. In case of Download Link please choose Download Icon from Link Icon Dropdown to get Download Icon.

Also custom Icon can be choosen by selecting "Custom" from Link Icon Dropdown

By default Arrow Icon for internal Links is used, when "Default" from Link Icon Dropdown is selected. To get the correct default Icons for external, Phone, Mail, and Social Media Links, Editor needs to set this Button URL correctly, like:

- Phone = tel:+4912345
- Mail = mailto:abc123@eon.com
- Social Media = https://www.your-social-media-adress.com
- External = "https://" before the URL
- Internal = "/content" before the URL

Beside that, Editor can check "Open in a new Window" Option if Link should not open in same Window.

Moreover, Editor can choose between trailing or leading Icon Position. Additionally, Editor can decide to have none, only on Mobile, or always Full Width Button.

![Configure Button as Type Modal](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/button_modal%3A3-4?fmt=webp)

### Configure Button as Type Modal

At first, Editor needs to choose Button Type. Button Type can be Link or Modal.

If Type Modal is selected, Editor can enter a Text for the Button. Moreover, Editor can add a Title for it.

To configure the Button, Editor need to which should be opened by the Button.

Moreover, Editor can choose between Trailing or Leading Icon Position. Additionally, Editor can decide to have none, only on Mobile, or always Full Width Button.

![Choose Rank & Color](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/button_rank-color%3A3-4?fmt=webp)

### Choose Rank & Color

Editor can select to adjust the Color Scheme as Option.

Once it is selected, Editor has to select if it should be a Primary or Secondary Button, as well as on which Background Color the Component is used.

Depending on the Background Color different Color Schemes can be selected.