Skip to main content

Delete

Overview​

The Delete component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more. It supports all Bulma size and color helpers, and includes accessibility best practices.

info

This component is ideal for adding a visually consistent, accessible close button to any Bulma-styled element.

Import​

import { Delete } from '@allxsmith/bestax-bulma';

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
textColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Text color helper.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Bulma color modifier for the button.
bgColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Background color helper.
size'small' | 'medium' | 'large'—Size modifier for the delete button.
onClick(event: React.MouseEvent<HTMLButtonElement>) => void—Click handler for the button.
ariaLabelstring'Close'ARIA label for accessibility.
disabledbooleanfalseWhether the button is disabled.
...All standard <button> and Bulma helper props(See Helper Props)

Usage​

Default Delete​

<Delete />

Small, Medium, Large​

<Delete size="small" />
<Delete size="medium" />
<Delete size="large" />

Disabled​

<Delete disabled />

With Custom Class​

<Delete className="custom-delete" />

With Text Color​

<Delete textColor="primary" />

With Background Color​

<Delete bgColor="info" />

With Margin​

<Delete m="2" />

In a Tag​

<span className="tag is-info is-medium">
  Example Tag
  <Delete size="small" textColor="danger" ariaLabel="Remove tag" />
</span>

In a Notification​

<div className="notification is-primary">
  <Delete bgColor="warning" ariaLabel="Close notification" />
  <p>This is a primary notification with a delete button.</p>
</div>

In a Message Header​

<article className="message is-success">
  <div className="message-header">
    <p>Success Message</p>
    <Delete m="1" textColor="dark" ariaLabel="Close message" />
  </div>
  <div className="message-body">
    This is a success message with a delete button in the header.
  </div>
</article>

Accessibility​

  • ARIA label: Always set a meaningful ariaLabel for screen readers (default is 'Close').
  • Keyboard: The button is focusable and supports keyboard activation.
  • Disabled: Uses both disabled and Bulma’s is-disabled for proper styling and accessibility.
tip

For custom close actions, use the onClick prop.

Additional Resources​