Sponsor
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>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>Bulma uses it for the tags, the notifications, and the messages:
Example
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>|
CSS Variable
|
Value
|
|---|---|
|
|
|
|
|
|
|
|
