DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Jordan Brennan
Jordan Brennan

Posted on • Updated on

M-'s type="remove" button

HTML provides us with a button element that comes in three types:

  • submit
  • reset
  • button (somewhat useless)

That's all good, but a semantic button type for remove/close purposes would be great too. Unfortunately it doesn't exist. Natively anyway...

M- includes remove as a fourth button type

A remove button is a real HTML button, but looks like this:
Remove button

Remove buttons are "intended for remove/close use cases". Applications are full of these use cases:

  • remove item from cart
  • close chat box
  • dismiss welcome message
  • delete user

Instead of classes and/or extra markup to create these types of buttons, M- instead gets creative and leverages HTML by simply introducing a new type value.

Adding a remove button is as simple as any other button type:

<button type="remove"></button>
Enter fullscreen mode Exit fullscreen mode

But since remove buttons don't have a label, it's best to add an ARIA label for accessibility:

<button type="remove" aria-label="Remove item from cart"></button>
Enter fullscreen mode Exit fullscreen mode

The default remove button often serves as a starting point from which you can customize based on the needs of the design using some of M-'s 150+ utility classes:
Remove button

Remove button sizes & colors

Event handling is no different than how you would implement any button. Here's a basic vanilla sample and Vue sample to give you a sense for how it's done:

vanilla

<button type="remove" data-user-id="1"></button>
<button type="remove" data-user-id="2"></button>
<button type="remove" data-user-id="3"></button>

<script>
document.querySelectorAll('button[type=remove]').forEach(btn => {
  btn.addEventListener('click', e => console.log(`Remove user ${e.currentTarget.dataset.userId}`))
})
</script>
Enter fullscreen mode Exit fullscreen mode
Vue.js

<template>
  <button v-on:click="removeUser" type="remove" data-user-id="1"></button>
  <button v-on:click="removeUser" type="remove" data-user-id="2"></button>
  <button v-on:click="removeUser" type="remove" data-user-id="3"></button>
</template>

<script>
export default {
  methods: {
    removeUser(e) {
      console.log(`Remove user ${e.currentTarget.dataset.userId}`)
    }
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

That's M-'s type="remove" button. Semantic, easily styled, and easily hooked up into any application.

Read about M-'s bullet-less type="none" list and learn more out the tiny 6kb, framework-agnostic, standards-based M- UI library.

Top comments (1)

Collapse
 
atapas profile image
Tapas Adhikary

Good one, Jordan!

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!