Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Available Properties:
  • Available Slots:
  • Examples

Was this helpful?

  1. Components

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

PreviousBlockNextButton Group

Last updated 1 year ago

Was this helpful?

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

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

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

{% 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

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