# Buttons

Buttons follow the same contextual classes as of bootstrap with additional modifiers.

<div align="left"><img src="/files/-LUFRhOTVHKzDYR9g806" alt=""></div>

```markup
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link ">Link</button>
```

### Rounded Buttons

<div align="left"><img src="/files/-LUFRpmtafd6ae1rbQkq" alt=""></div>

```markup
<button type="button" class="btn btn-primary btn-rounded ">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded ">Secondary</button>
<button type="button" class="btn btn-success btn-rounded ">Success</button>
<button type="button" class="btn btn-danger btn-rounded ">Danger</button>
<button type="button" class="btn btn-warning btn-rounded ">Warning</button>
<button type="button" class="btn btn-info btn-rounded ">Info</button>
<button type="button" class="btn btn-light btn-rounded ">Light</button>
<button type="button" class="btn btn-dark btn-rounded ">Dark</button>
<button type="button" class="btn btn-link  btn-rounded ">Link</button>

```

### Button Badge

badges can be combined with buttons following is an example of badges with soft version of their color you can also use non soft color variation like `badge-primary`

<div align="left"><img src="/files/-LUFRyZGsNNZU7N2we7M" alt=""></div>

```markup
<button type="button" class="btn badge badge-soft-primary ">Primary</button>
<button type="button" class="btn badge badge-soft-secondary ">Secondary</button>
<button type="button" class="btn badge badge-soft-success ">Success</button>
<button type="button" class="btn badge badge-soft-danger ">Danger</button>
<button type="button" class="btn badge badge-soft-warning ">Warning</button>
<button type="button" class="btn badge badge-soft-info ">Info</button>
<button type="button" class="btn badge badge-soft-light ">Light</button>
<button type="button" class="btn badge badge-soft-dark ">Dark</button>
<button type="button" class="btn badge badge-soft-link  ">Link</button>

```

### Rounded Circle Buttons

<div align="left"><img src="/files/-LUFS1iEOfFwRwYaJdVf" alt=""></div>

```markup
<button type="button" class="btn btn-rounded-circle btn-primary ">Primary</button>
<button type="button" class="btn btn-rounded-circle btn-secondary ">Secondary</button>
<button type="button" class="btn btn-rounded-circle btn-success ">Success</button>
<button type="button" class="btn btn-rounded-circle btn-danger ">Danger</button>
<button type="button" class="btn btn-rounded-circle btn-warning ">Warning</button>
<button type="button" class="btn btn-rounded-circle btn-info ">Info</button>
<button type="button" class="btn btn-rounded-circle btn-light ">Light</button>
<button type="button" class="btn btn-rounded-circle btn-dark ">Dark</button>
<button type="button" class="btn btn-rounded-circle btn-link  ">Link</button>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atomui.com/ui-elements/buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.