# Button ```mdx

``` ## Usage Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, Button component CSS, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/button.css"; @import "basecoat-css/styles/vega.css"; ``` Using CDN or bundler imports? See the [Installation page](/installation). ```html ``` Add `class="btn"` to a ` ``` ### Default ```mdx ``` ### Outline ```mdx ``` ### Secondary ```mdx ``` ### Ghost ```mdx ``` ### Destructive ```mdx ``` ### Link ```mdx ``` ### Icon ```mdx ``` ### With icon Use `data-icon="inline-start"` or `data-icon="inline-end"` on inline icons to match upstream icon-aware spacing. ```mdx ``` ### Rounded Use the `rounded-full` class to make the button rounded. ```mdx ``` ### Spinner ```mdx