> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/components/buttons.md).

# 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,
} %}
```