# Intro Migrating Bootstrap buttons with the form `<button class="btn btn-variant">` to `GlButton` has many similar aspects to migrating `GlDeprecatedButtons`. See https://gitlab.com/groups/gitlab-org/-/epics/3459 for more detailed information on on our `GlButton` component. ## Instructions Follow the steps below to migrate a Bootstrap button to a GlButton. 1. Import GlButton from GitLab UI at the top of the file using the following: `import { GlButton } from '@gitlab/ui';` If a component from GitLab UI is already being imported, add GlButton to the list: `import { GlModal, GlButton } from '@gitlab/ui';` 1. Under `export default {` add a component section, if one does not already exist already: ``` export default { components: { GlButton, }, ```` If a list of components already exist, add GlButton to the list: ``` export default { components: { GlModal, GlButton, }, ```` 1. Update instances of `button` to `gl-button`. `<button` becomes `<gl-button` and `</button>` becomes `</gl-button>` 1. Remove any button classes, such as `btn`, `btn-default`, `btn-block`, etc. These will be replaced with properties. 1. Add the correct variant and category, as well as any other necessary properties for the specific button you are migrating. For available properties, see https://gitlab.com/groups/gitlab-org/-/epics/3459#configuration. 1. Remove `type="button"` 1. If Jest tests are failing, make sure you have replaced all `trigger('click')` calls on the replaced button with `vm.$emit('click')`. This is necessary because `GlButton` is a Vue component and it doesn't have a native `click` event by default but emits an event instead: ```javascript // before wrapper.find('.my-button').trigger('click'); // after wrapper.find('.my-button').vm.$emit('click'); ``` In some cases, when we need to prevent a default event, we also need to add a second parameter to `$emit`: ```javascript wrapper.find('.my-button').vm.$emit('click', new Event('click')); ``` 8. Be sure to add a changelog to your MR