<commit_before>/*doc
---
title: Buttons
name: button
categories:
 - css_base_buttons
 - css_all
---

<code class="pam">
<img src="/styleguide/download.svg" width="16" height="16"/>
npm install pui-css-buttons --save
</code>

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example_table
<button class="btn-default">Button</button>

<a class="button btn-default" aria-label="Example Website" href="http://example.com">Link</a>
```

If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

## Styles

Every button type has a default style, an alt style (with inverted colors and a transparent background) and a flat style (alt with transparent borders).

Button                                           | Button Alt                                               | Button Flat                                                | Description
-------------------------------------------------|----------------------------------------------------------|------------------------------------------------------------|-----------
<button class="btn-default">Default</button>     |<button class="btn-default-alt">Default Alt</button>      | <button>Default Flat</button>                              | This the default button style.
<button class="btn-primary">Primary</button> |<button class="btn-primary-alt">Primary Alt</button>  | <button class="btn-primary-flat">Primary Flat</button> | Use this button for primary actions.
<button class="btn-danger">Danger</button>       |<button class="btn-danger-alt">Danger Alt</button>        | <button class="btn-danger-flat">Danger Flat</button>       | This button is for delete actions, these actions should also have a confirmation dialog
<button class="btn-brand">Brand</button>         |<button class="btn-brand-alt">Brand Alt</button>          | <button class="btn-brand-flat">Brand Flat</button>         | This button is for marketing purposes only

The most common button examples are below:

```html_example_table
<button class="btn-default">Default</button>

<button class="btn-default-alt">Default Alt</button>

<button class="btn-primary">Primary</button>

<button class="btn-primary-alt">Primary Alt</button>

<button class="btn-primary-flat">Primary Flat</button>

<button class="btn-danger">Danger</button>
```


*/


/*doc
---
title: Disabling
name: button_disabling
parent: button
---

Buttons can be disabled.
If given the disabled attribute, a button will be functionally disabled, but will look unchanged.
If given the disabled class, a button will be functionally disabled, and will also change visually.

```html_example_table
<button class="btn-default" disabled>Disabled Functionally</button>

<button class="btn-default disabled">Disabled Visually</button>

<button class="btn-default-alt disabled">Alt Disabled</button>

<button class="disabled">Flat Disabled</button>

<button class="btn-primary disabled">Primary Disabled</button>

```

*/


/*doc
---
title: Sizes
name: button_sizes
parent: button
---

There are three sizes for buttons: Large, small, and default. Simply apply the
size modifier class for the desired size.

```html_example_table
<button class="btn-default btn-lg">Large</button>

<button class="btn-default">Default</button>

<button class="btn-default btn-sm">Small</button>
```

*/

/*doc
---
title: Icons
name: button_icons
parent: button
---

Buttons can be containers for icons:

```html_example_table
<button class="btn-default-alt btn-icon">
  <img class="svgicon" src="/styleguide/download.svg" width="16" height="16"/>
</button>
```

*/<commit_msg>chore(buttons): update icon example to use svg instead of img<commit_after>/*doc
---
title: Buttons
name: button
categories:
 - css_base_buttons
 - css_all
---

<code class="pam">
<img src="/styleguide/download.svg" width="16" height="16"/>
npm install pui-css-buttons --save
</code>

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example_table
<button class="btn-default">Button</button>

<a class="button btn-default" aria-label="Example Website" href="http://example.com">Link</a>
```

If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

## Styles

Every button type has a default style, an alt style (with inverted colors and a transparent background) and a flat style (alt with transparent borders).

Button                                           | Button Alt                                               | Button Flat                                                | Description
-------------------------------------------------|----------------------------------------------------------|------------------------------------------------------------|-----------
<button class="btn-default">Default</button>     |<button class="btn-default-alt">Default Alt</button>      | <button>Default Flat</button>                              | This the default button style.
<button class="btn-primary">Primary</button> |<button class="btn-primary-alt">Primary Alt</button>  | <button class="btn-primary-flat">Primary Flat</button> | Use this button for primary actions.
<button class="btn-danger">Danger</button>       |<button class="btn-danger-alt">Danger Alt</button>        | <button class="btn-danger-flat">Danger Flat</button>       | This button is for delete actions, these actions should also have a confirmation dialog
<button class="btn-brand">Brand</button>         |<button class="btn-brand-alt">Brand Alt</button>          | <button class="btn-brand-flat">Brand Flat</button>         | This button is for marketing purposes only

The most common button examples are below:

```html_example_table
<button class="btn-default">Default</button>

<button class="btn-default-alt">Default Alt</button>

<button class="btn-primary">Primary</button>

<button class="btn-primary-alt">Primary Alt</button>

<button class="btn-primary-flat">Primary Flat</button>

<button class="btn-danger">Danger</button>
```


*/


/*doc
---
title: Disabling
name: button_disabling
parent: button
---

Buttons can be disabled.
If given the disabled attribute, a button will be functionally disabled, but will look unchanged.
If given the disabled class, a button will be functionally disabled, and will also change visually.

```html_example_table
<button class="btn-default" disabled>Disabled Functionally</button>

<button class="btn-default disabled">Disabled Visually</button>

<button class="btn-default-alt disabled">Alt Disabled</button>

<button class="disabled">Flat Disabled</button>

<button class="btn-primary disabled">Primary Disabled</button>

```

*/


/*doc
---
title: Sizes
name: button_sizes
parent: button
---

There are three sizes for buttons: Large, small, and default. Simply apply the
size modifier class for the desired size.

```html_example_table
<button class="btn-default btn-lg">Large</button>

<button class="btn-default">Default</button>

<button class="btn-default btn-sm">Small</button>
```

*/

/*doc
---
title: Icons
name: button_icons
parent: button
---

Buttons can be containers for icons:

```html_example_table
<button class="btn-default-alt btn-icon">
  <span class="svgicon">
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" class="icon-plus" data-src="/static/media/add.45a0a5e5.svg">
      <path d="M38 26H26v12h-4V26H10v-4h12V10h4v12h12v4z" />
    </svg>
  </span>
</button>
```

*/
{'fraction_non_alphanumeric': 0.1745173745173745, 'fraction_numerical': 0.007207207207207207, 'mean_word_length': 3.0835522858644246, 'pattern_counts': {'":': 0, '<': 139, '<?xml version=': 0, '>': 139, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 1}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 15, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6697677', 'n_tokens_mistral': 2201, 'n_tokens_neox': 2078, 'n_words': 669}