---
layout: documentation
doc-tab: elements
doc-subtab: delete
---

{% include subnav-elements.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Delete</h1>
    <h2 class="subtitle">
      A versatile <strong>delete</strong> cross
    </h2>

    <hr>

    <div class="content">
      <p>
        The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
      </p>
    </div>

{% capture cross_example %}
<a class="delete"></a>
{% endcapture %}
<div class="columns">
<div class="column">
  <div class="content">
    <p>
      On its own, it's a simple circle with a cross:
    </p>
  </div>
  {{cross_example}}
</div>
<div class="column">
{% highlight html %}
{{cross_example}}
{% endhighlight %}
</div>
</div>

{% capture cross_sizes_example %}
<a class="delete is-small"></a>
<a class="delete"></a>
<a class="delete is-medium"></a>
<a class="delete is-large"></a>
{% endcapture %}
<div class="columns">
<div class="column">
  <div class="content">
    <p>
      It comes in <strong>4 sizes</strong>:
    </p>
  </div>
  {{cross_sizes_example}}
</div>
<div class="column">
{% highlight html %}
{{cross_sizes_example}}
{% endhighlight %}
</div>
</div>

{% capture cross_elements_example %}
<div class="block">
  <span class="tag is-success">
    Hello World
    <button class="delete is-small"></button>
  </span>
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
{% endcapture %}
<div class="columns">
<div class="column">
  <div class="content">
    <p>
      Bulma uses it for the <a href="/documentation/elements/tag/">tags</a> and the <a href="/documentation/elements/notification/">notifications</a>:
    </p>
  </div>
  {{cross_elements_example}}
</div>
<div class="column">
{% highlight html %}
{{cross_elements_example}}
{% endhighlight %}
</div>
</div>

  </div>
</section>