VOOZH about

URL: https://bulma.io/documentation/elements/delete/

⇱ Delete | Bulma: Free, open source, and modern CSS framework based on Flexbox


πŸ‘ Image

Learn CSS with πŸŽ“ online interactive courses,πŸ“Ί educational videos, and πŸ§‘πŸ»β€πŸ’»project-building tutorials.

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

πŸ‘ Route Planner and Route Optimizer

Delete


A versatile delete cross

The delete element is a stand-alone element that can be used in different contexts.

On its own, it's a simple circle with a cross:

Example

HTML

<button class="delete"></button>

Sizes #

It comes in 4 sizes:

Example

HTML

<button class="delete is-small"></button>
<button class="delete"></button>
<button class="delete is-medium"></button>
<button class="delete is-large"></button>

Combinations #

Bulma uses it for the tags, the notifications, and the messages:

Example

Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
Info
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.

HTML

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

Sass and CSS variables #

CSS Variable
Value
var(--bulma-delete-dimensions)
1.25rem
var(--bulma-delete-background-l)
0%
var(--bulma-delete-background-alpha)
0.5
var(--bulma-delete-color)
var(--bulma-white)

How to support Bulma

One-time donation

Browser testing via

πŸ‘ Image
πŸ‘ Image

Visit our Sponsors

Monthly donation

Become a sponsor
πŸ‘ Image
#native_company# #native_desc#
#native_cta#
πŸ‘ Image
πŸ‘ Image
Get started for Free
πŸ‘ Image
πŸ‘ Image
Get started for Free