# Click to New Tab

{% hint style="info" %}
WARNING avoid special symbols such as `(, ), [, ]` and similar in the texts of this component because it could break the look\&feel
{% endhint %}

Input variables:

```python
title: str
background_url: str
```

And accepts the following input variable as optional:

```python
href: Optional[str]
```

Example of use:

```python
s.plt.html(
    order=0,
    html=s.html_components.button_click_to_new_tab(
        title='Churn prediction & Explainability',
        background_url='https://cutt.ly/qJANGcX'
    )
)
```

![The text has a link embedded, all the space (cols\_size=12) of the component is clickable and will take you to a new window.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F47nGHvlNkg8JEr3cCjOe%2FHTML%20click%20to%20new%20tab.png?alt=media\&token=bf281d5b-9d1d-4caa-a309-c916f520935b)

You can resize, change position and text at will, for example:

```python
s.plt.html(
    order=0, cols_size=5, padding='1,0,0,6',
    html=s.html_components.button_click_to_new_tab(
        title='Churn prediction & Explainability',
        background_url='https://cutt.ly/qJANGcX'
    )
)
```

![With padding='1,0,0,6', it has a new position. The order of spaces is Top, Right, Bottom, Left.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FKUVXebMhD3GHoeSBny3U%2FHTML%20click%20to%20new%20tab%20padding.png?alt=media\&token=ac8a06ee-621d-4a22-9238-bf403147a9da)

More on how to use the [Grid](https://docs.shimoku.com/dev/building-web-app/grid).

#### Video demonstration <a href="#video-demonstration-of-the-bar-chart" id="video-demonstration-of-the-bar-chart"></a>

{% embed url="<https://www.loom.com/share/6d77a9e76e6c4cbe89ecd5b138c537dc>" %}