Bulma Delete

The Delete component in Bulma is a versatile cross (×) icon that can be used as a close or cancel button. It's commonly used in notifications, tags, modals, messages, and other UI elements where users need to dismiss or remove content.

Basic Delete Button

The basic delete element uses the .delete class:

<!-- Basic delete button -->
<button class="delete"></button>

<!-- Delete as anchor -->
<a class="delete"></a>

<!-- Delete as span -->
<span class="delete"></span>

Delete Sizes

Delete buttons come in multiple sizes:

<!-- Extra small -->
<button class="delete is-small"></button>

<!-- Small -->
<button class="delete is-small"></button>

<!-- Default -->
<button class="delete"></button>

<!-- Medium -->
<button class="delete is-medium"></button>

<!-- Large -->
<button class="delete is-large"></button>

<!-- Extra large -->
<button class="delete is-xlarge"></button>

Delete with Colors

<!-- Primary delete -->
<button class="delete is-primary"></button>

<!-- Success delete -->
<button class="delete is-success"></button>

<!-- Danger delete -->
<button class="delete is-danger"></button>

<!-- Warning delete -->
<button class="delete is-warning"></button>

<!-- Info delete -->
<button class="delete is-info"></button>

<!-- Light delete -->
<button class="delete is-light"></button>

<!-- Dark delete -->
<button class="delete is-dark"></button>

<!-- Black delete -->
<button class="delete is-black"></button>

Use Cases

1. Notification with Delete

<div class="notification is-info">
  <button class="delete"></button>
  <p>This is an info notification with a delete button to dismiss it.</p>
</div>

<div class="notification is-success">
  <button class="delete"></button>
  <p>Success! Your changes have been saved.</p>
</div>

<div class="notification is-warning">
  <button class="delete"></button>
  <p>Warning: This action cannot be undone.</p>
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  <p>Error: Something went wrong. Please try again.</p>
</div>

2. Message with Delete

<article class="message is-primary">
  <div class="message-header">
    <p>Primary Message</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    <p>This is a primary message with a delete button in the header.</p>
  </div>
</article>

<article class="message is-success">
  <div class="message-header">
    <p>Success Message</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    <p>Operation completed successfully.</p>
  </div>
</article>

3. Modal with Delete

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal Title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <p>Modal content goes here.</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

4. Tag with Delete

<!-- Basic tag with delete -->
<span class="tag is-primary">
  Primary Tag
  <button class="delete is-small"></button>
</span>

<!-- Multiple tags with delete -->
<div class="tags">
  <span class="tag is-info">
    Info Tag
    <button class="delete is-small"></button>
  </span>
  <span class="tag is-success">
    Success Tag
    <button class="delete is-small"></button>
  </span>
  <span class="tag is-warning">
    Warning Tag
    <button class="delete is-small"></button>
  </span>
  <span class="tag is-danger">
    Danger Tag
    <button class="delete is-small"></button>
  </span>
</div>

5. Breadcrumb with Delete

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documents</a></li>
    <li class="is-active">
      <a href="#" aria-current="page">Current Page</a>
      <button class="delete is-small ml-2"></button>
    </li>
  </ul>
</nav>

6. Card with Delete

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Card Title</p>
    <button class="card-header-icon" aria-label="close">
      <span class="delete"></span>
    </button>
  </header>
  <div class="card-content">
    <p>Card content here.</p>
  </div>
</div>

7. Dropdown with Delete

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Option 1
      </a>
      <a href="#" class="dropdown-item">
        Option 2
        <button class="delete is-small is-pulled-right"></button>
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        Option 3
      </a>
    </div>
  </div>
</div>

8. List Items with Delete

<div class="content">
  <ul>
    <li>
      List item 1
      <button class="delete is-small ml-2"></button>
    </li>
    <li>
      List item 2
      <button class="delete is-small ml-2"></button>
    </li>
    <li>
      List item 3
      <button class="delete is-small ml-2"></button>
    </li>
  </ul>
</div>

9. Form Fields with Delete

<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-right">
    <input class="input" type="email" placeholder="Enter email" value="user@example.com">
    <span class="icon is-right">
      <button class="delete is-small"></button>
    </span>
  </div>
</div>

<!-- Multiple input fields with delete -->
<div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">JavaScript</span>
      <button class="tag is-delete"></button>
    </div>
  </div>
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">React</span>
      <button class="tag is-delete"></button>
    </div>
  </div>
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">Bulma</span>
      <button class="tag is-delete"></button>
    </div>
  </div>
</div>

Custom Delete Styles

/* Custom delete colors */
.delete.is-custom {
  background-color: #8a4d76;
}

.delete.is-custom:hover {
  background-color: #7a3d66;
}

.delete.is-custom:focus {
  box-shadow: 0 0 0 0.125em rgba(138, 77, 118, 0.25);
}

/* Gradient delete */
.delete.is-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Delete with shadow */
.delete.has-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.delete.has-shadow:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Animated delete */
.delete.is-animated {
  transition: all 0.3s ease;
}

.delete.is-animated:hover {
  transform: rotate(90deg);
}

/* Custom delete sizes */
.delete.is-xsmall {
  height: 16px;
  max-height: 16px;
  max-width: 16px;
  min-height: 16px;
  min-width: 16px;
  width: 16px;
}

.delete.is-xxlarge {
  height: 64px;
  max-height: 64px;
  max-width: 64px;
  min-height: 64px;
  min-width: 64px;
  width: 64px;
}

/* Delete with border */
.delete.has-border {
  border: 2px solid currentColor;
}

/* Circular delete */
.delete.is-circle {
  border-radius: 50%;
}

Interactive Examples

Delete with Confirmation

<div class="notification is-warning">
  <button class="delete" onclick="this.parentElement.style.display='none'"></button>
  <p>Click the delete button to remove this notification.</p>
</div>

<!-- Delete with JavaScript confirmation -->
<button class="delete" onclick="if(confirm('Are you sure?')) this.parentElement.remove()"></button>

Delete with Animation

<!-- Fade out animation -->
<div class="notification is-info" id="notification1">
  <button class="delete" onclick="fadeOut(this.parentElement)"></button>
  <p>This notification will fade out when deleted.</p>
</div>

<script>
function fadeOut(element) {
  element.style.opacity = 0;
  element.style.transition = 'opacity 0.3s ease';
  setTimeout(() => element.remove(), 300);
}
</script>

Accessibility Considerations

<!-- Always provide ARIA labels -->
<button class="delete" aria-label="Close notification"></button>
<button class="delete" aria-label="Remove tag"></button>
<button class="delete" aria-label="Dismiss message"></button>

<!-- Screen reader only text -->
<button class="delete">
  <span class="sr-only">Close modal</span>
</button>

<!-- Proper focus management -->
<button class="delete" tabindex="0" aria-label="Delete item"></button>

<!-- Use appropriate semantic elements -->
<!-- Good: -->
<button class="delete" aria-label="Close">×</button>

<!-- Better (for screen readers): -->
<button class="delete" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

Responsive Delete

<!-- Different sizes on different screens -->
<button class="delete is-small-mobile is-medium-tablet is-large-desktop"></button>

<!-- Hide delete on small screens -->
<button class="delete is-hidden-mobile"></button>

<!-- Show delete only on specific screens -->
<button class="delete is-hidden-touch"></button>
<button class="delete is-hidden-desktop"></button>

Best Practices

• Always provide ARIA labels for accessibility
• Use appropriate sizes based on context
• Consider using color to indicate importance (red for destructive actions)
• Ensure sufficient contrast for visibility
• Add hover and focus states for better UX
• Use JavaScript to handle actual deletion/dismissal
• Consider adding confirmation for important deletions
• Position delete buttons consistently within components
• Test delete functionality on touch devices
• Provide visual feedback when deletion occurs

Up next: Bulma Dropdown Component