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

---

Usage

Default Delete

The default usage of the Delete component renders a Bulma-styled close button. Use this for dismissing modals, notifications, tags, or any element that needs a consistent close/delete action.

<Delete />

Small, Medium, Large

The size prop allows you to adjust the button size. Use size="small", size="medium", or size="large" to match the context of your UI.

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

Disabled

The disabled prop disables the button, making it non-interactive and visually muted. Use this when the close action should be temporarily unavailable.

<Delete disabled />

With Custom Class

Add your own CSS classes with the className prop to further customize the delete button's appearance or behavior.

<Delete className="custom-delete" />

With Text Color

Set the text color using the textColor prop. For example, textColor="primary" applies Bulma's primary color to the button.

<Delete textColor="primary" />

With Background Color

Apply a background color using the bgColor prop. Here, bgColor="info" gives the button a colored background.

<Delete bgColor="info" />

With Margin

You can use Bulma spacing helpers like m to add margin around the button for better layout control.

<Delete m="2" />

In a Tag

The Delete component is often used inside a Tag for removable labels. This example shows a small, colored delete button inside a tag.

<Tag color="info" size="medium">
  Example Tag
  <Delete size="small" textColor="danger" ariaLabel="Remove tag" />
</Tag>

In a Notification

Use the Delete component inside a Notification to provide a dismiss action for alerts or messages.

<Notification color="primary">
  <Delete bgColor="warning" ariaLabel="Close notification" />
  <Paragraph>This is a primary notification with a delete button.</Paragraph>
</Notification>

In a Message Header

The Delete component can be placed in a message header for dismissible messages. Combine with spacing and color props for best results.

<Message color="success" title="Success Message">
  This is a success message with a delete button in the header.
</Message>

---

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.

---

Related Components

• Notification: For dismissible alerts.
• Tag: For removable tag UI.
• Message: For dismissible messages.
• Helper Props: Bulma helper props for spacing, color, etc.

---

Additional Resources

• Bulma Delete Documentation
• Storybook: Delete Stories

---

Props

Prop	Type	Default	Description
className	string	—	Additional CSS classes to apply.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
color	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'	—	Text color alias: renders has-text-<color>, exactly like textColor. Not a filled variant (no .delete.is-<color> CSS exists). Prefer textColor, which takes precedence when both are set; use bgColor for a colored surface.
bgColor	Bulma color | 'inherit' | 'current'	—	Background color helper.
onClick	(event: React.MouseEvent<HTMLButtonElement>) => void	—	Click handler for the button.
size	'small' | 'medium' | 'large'	—	Size modifier for the delete button.
ariaLabel	string	'Close'	ARIA label for accessibility (default: 'Close').
disabled	boolean	false	Whether the button is disabled (default: false).
...	All standard <button> attributes and Bulma helper props	—	See Helper Props

---

CSS & Sass Variables

Bulma declares these variables globally rather than on Delete's own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via className/style) for a one-off, or on :root to retheme every instance. See Theme.

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