> For the complete documentation index, see [llms.txt](https://neptune-css.gitbook.io/neptune-css-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://neptune-css.gitbook.io/neptune-css-docs/components/buttons.md).

# Buttons

{% code title="Default Button" %}

```html
<button class="button">
    <span class="button-text">Buton</span>
</button>
```

{% endcode %}

## Sizes

{% tabs %}
{% tab title="Small" %}

```html
<button class="button button-s">
    <span class="button-text">Default S</span>
</button>
```

{% endtab %}

{% tab title="Medium" %}

```html
<button class="button button-m">
    <span class="nutton-text">Default M</span>
</button>
```

{% endtab %}

{% tab title="Large" %}

```html
<button class="button button-l">
    <span class="nutton-text">Default L</span>
</button>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/oNaayXQ>" %}
Button sizes example
{% endembed %}

## Styles

{% embed url="<https://codepen.io/neptunecss/pen/XWxxYbV>" %}
Button styles example
{% endembed %}

### Primary Button

```html
<button class="button-primary">
    <span class="button-text">Primary Button</span>
</button>
```

### Secondary Button

```html
<button class="button-secondary">
    <span class="button-text">Secondary Button</span>
</button>
```

### CTA Button

```html
<button class="button-cta">
    <span class="button-text">CTA Button</span>
</button>
```

### Information Button

```html
<button class="button-info">
    <span class="button-text">Information Button</span>
</button>
```

### Success Button

```html
<button class="button-success">
    <span class="button-text">Success Button</span>
</button>
```

### Warning Button

```html
<button class="button-warning">
    <span class="button-text">Warning Button</span>
</button>
```

### Error Button

```html
<button class="button-error">
    <span class="button-text">Error Button</span>
</button>
```

## Icon button

{% tabs %}
{% tab title="Icon Left" %}

<pre class="language-html"><code class="lang-html"><strong>&#x3C;button class="button-m button-primary">
</strong>    &#x3C;span class="button-icon-left">
        &#x3C;i class="icon your-icon">&#x3C;/i>
    &#x3C;/span>
    &#x3C;span class="button-text">Button&#x3C;/span>
&#x3C;/button>
</code></pre>

{% endtab %}

{% tab title="Icon Right" %}

```html
<button class="button-m button-primary">
    <span class="button-text">Button</span>
    <span class="button-icon-right">
        <i class="icon your-icon"></i>
    </span>
</button>
```

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/neptunecss/pen/ZEqqmRd>" %}
Icon button example
{% endembed %}