--- title: Delete layout: docs theme: library doc-tab: elements doc-subtab: delete breadcrumb: - home - documentation - elements - elements-delete meta: colors: false sizes: true variables: false --- {% capture cross_example %} <button class="delete"></button> {% endcapture %} {% capture cross_sizes_example %} <button class="delete is-small"></button> <button class="delete"></button> <button class="delete is-medium"></button> <button class="delete is-large"></button> {% 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 %} <div class="content"> <p>The <code>delete</code> element is a stand-alone element that can be used in different contexts.</p> <p>On its own, it's a simple circle with a cross:</p> </div> {% include docs/elements/snippet.html content=cross_example %} {% include docs/elements/anchor.html name="Sizes" %} <div class="content"> <p>It comes in <strong>4 sizes</strong>:</p> </div> {% include docs/elements/snippet.html content=cross_sizes_example %} {% include docs/elements/anchor.html name="Combinations" %} <div class="content"> <p> Bulma uses it for the <a href="{{ site.url }}/documentation/elements/tag/">tags</a>, the <a href="{{ site.url }}/documentation/elements/notification/">notifications</a>, and the <a href="{{ site.url }}/documentation/components/message/">messages</a>: </p> </div> {% include docs/elements/snippet.html content=cross_elements_example %} {% include docs/components/variables.html %}