| 1 | ### SCSS
|
| 2 |
|
| 3 | #### Mixins
|
| 4 |
|
| 5 | Mixins specific to button are located in [src/components/button/\_mixins.scss]().
|
| 6 |
|
| 7 | | Name | Params | Description |
|
| 8 | | -------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
|
| 9 | | `button-base` | | Base styles used in every button. Used in `@mixin button-theme` by default |
|
| 10 | | `button-theme` | `bg-color`, `border-color`, `font-color`, `hover-bg-color`, `icon-color` | Used to create variant styles for a button (Variations like, primary, secondary, etc.) |
|
| 11 |
|
| 12 | #### Modifiers
|
| 13 |
|
| 14 | Use these modifiers with `.bx--btn` class.
|
| 15 |
|
| 16 | | Selector | Description |
|
| 17 | | --------------------- | --------------------------------------------- |
|
| 18 | | `.bx--btn--primary` | Selector for applying primary button styles |
|
| 19 | | `.bx--btn--secondary` | Selector for applying secondary button styles |
|
| 20 | | `.bx--btn--tertiary` | Selector for applying tertiary button styles |
|
| 21 | | `.bx--btn--danger` | Selector for applying danger button styles |
|
| 22 | | `.bx--btn--sm` | Selector for applying small button styles |
|
| 23 | | `.bx--btn—ghost` | Selector for applying ghost button styles |
|
| 24 |
|
| 25 | ### FAQ
|
| 26 |
|
| 27 | #### Using icons with buttons
|
| 28 |
|
| 29 | All buttons can use icons. It's recommended to inline SVG icons when possible.
|
| 30 | Simply add the appropriate `<svg>` to the button HTML with the `bx--btn__icon` class.
|
| 31 | You can also include `<title>` for better accessibility to describe what the button does.
|
| 32 |
|
| 33 | ```html
|
| 34 | <button class="bx--btn bx--btn--secondary" type="button">
|
| 35 | Secondary
|
| 36 | <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
|
| 37 | <title>add a new connection to your instance</title>
|
| 38 | <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
|
| 39 | </svg>
|
| 40 | </button>
|
| 41 | ```
|