# Buttons

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/buttons/)

### Available Properties:

* `html_tag`: The HTML tag to use for the button (button | a). Defaults to `button`.
* `url`: URL link for the button when the HTML tag is an anchor link.
* `color`: Bootstrap includes several predefined button styles, each serving its semantic purpose, with a few extras thrown in for more control. (primary | secondary | success | danger | warning | info | dark | light | link)
* `outline`: (true|false) In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
* `size`: (`btn-sm | btn-lg`) Bootstrap button size
* `disabled`: (`true|false`) Disabled button
* `button_utility_classes`: An array of utility classes.

### Available Slots:

* `content`: The content for the button

### Examples

**Example #1:** Primary button

```twig
{% include 'radix:button' with {
  html_tag: 'button',
  color: 'primary',
  content: 'Login'
} %}
```

**Example #2:** Anchor button as Read more link in a Card

```twig
{% include 'radix:button' with {
  html_tag: 'a',
  color: 'primary',
  outline: true,
  content: 'Read more',
  url: '/blog/test-blog1',
  button_utility_classes: ['card-link', 'float-end', 'mt-3', 'read-more']
} %}
```

**Example #3:** Disabled Anchor button

```twig
{% include 'radix:button' with {
  html_tag: 'a',
  color: 'primary',
  content: 'Read more',
  url: '#',
  disabled: true,
} %}
```


---

# 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.trydrupal.com/radix/components/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.