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

{% capture cross_example %}
<a class="delete"></a>
{% endcapture %}

{% 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 %}

{% 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>

<article class="message is-info">
  <div class="message-header">
    Info
    <button class="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>
{% endcapture %}

{% 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>
    {%
      include meta.html
      colors=false
      sizes=true
      variables=false
    %}

    <hr>

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

    <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>

    {% include heading.html name="Sizes" %}

    <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>

    <hr style="margin-bottom: 0;">

    <h3 id="combinations" class="title" style="padding-top: 1.5rem;">
      Combinations
    </h3>

    <div class="columns">
      <div class="column">
        <div class="content">
          <p>
            Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
          </p>
        </div>
        {{cross_elements_example}}
      </div>
      <div class="column">
        {% highlight html %}{{cross_elements_example}}{% endhighlight %}
      </div>
    </div>

  </div>
</section>