<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-buttons.html.twig */
class __TwigTemplate_000901c78daf3da0e4fa668c09fa6059 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-buttons.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-buttons.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-buttons.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Buttons
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 7
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Buttons"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 10
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 11
        echo "\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Default Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the button classes on an
\t\t\t\t\t\t<code>&lt;a&gt;</code>,
\t\t\t\t\t\t<code>&lt;button&gt;</code>, or
\t\t\t\t\t\t<code>&lt;input&gt;</code>
\t\t\t\t\t\telement.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Light</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\">Dark</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-link\">Link</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Outline</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-outline-**</code>
\t\t\t\t\t\tto quickly create a bordered buttons.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-primary\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-success\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-warning\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-info\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-pink\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-purple\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Light</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-dark\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Rounded</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.rounded-pill</code>
\t\t\t\t\t\tto default button to get rounded corners.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary rounded-pill\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary rounded-pill\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success rounded-pill\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger rounded-pill\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning rounded-pill\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info rounded-pill\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink rounded-pill\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple rounded-pill\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light rounded-pill\">Light</buttn>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark rounded-pill\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Outline Rounded</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-outline-**</code>
\t\t\t\t\t\tto quickly create a bordered buttons.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-primary rounded-pill\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary rounded-pill\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-success rounded-pill\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger rounded-pill\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-warning rounded-pill\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-info rounded-pill\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-pink rounded-pill\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-purple rounded-pill\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light rounded-pill\">Light</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-dark rounded-pill\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Soft Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-soft-**</code>
\t\t\t\t\t\tto quickly create a soft background color buttons.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-primary\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-secondary\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-success\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-danger\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-warning\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-info\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-pink\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-purple\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-dark\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Soft Rounded Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-soft-**</code>
\t\t\t\t\t\t<code>.rounded-pill</code>
\t\t\t\t\t\tto quickly create a soft background color buttons with rounded.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-primary rounded-pill\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-secondary rounded-pill\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-success rounded-pill\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-danger rounded-pill\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-warning rounded-pill\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-info rounded-pill\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-dark rounded-pill\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button-Sizes</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tAdd
\t\t\t\t\t\t<code>.btn-lg</code>,
\t\t\t\t\t\t<code>.btn-sm</code>
\t\t\t\t\t\tfor additional sizes.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap align-items-center gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary btn-lg\">Large</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">Normal</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success btn-sm\">Small</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button-Disabled</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tAdd the
\t\t\t\t\t\t<code>disabled</code>
\t\t\t\t\t\tattribute to
\t\t\t\t\t\t<code>&lt;button&gt;</code>
\t\t\t\t\t\tbuttons.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" disabled>Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" disabled>Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" disabled>Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\" disabled>Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Icon Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tIcon only button.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">
\t\t\t\t\t\t\t<i class=\"ri-heart-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\">
\t\t\t\t\t\t\t<i class=\"ri-windows-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\">
\t\t\t\t\t\t\t<i class=\"ri-music-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">
\t\t\t\t\t\t\t<i class=\"ri-shield-star-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\">
\t\t\t\t\t\t\t<i class=\"ri-thumb-up-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">
\t\t\t\t\t\t\t<i class=\"ri-keyboard-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">
\t\t\t\t\t\t\t<i class=\"ri-school-line\"></i>
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">
\t\t\t\t\t\t\t<i class=\"ri-hearts-fill me-1\"></i>
\t\t\t\t\t\t\t<span>Like</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">
\t\t\t\t\t\t\t<i class=\"ri-rocket-line me-1\"></i>
\t\t\t\t\t\t\t<span>Launch</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">
\t\t\t\t\t\t\t<i class=\"ri-server-line me-1\"></i>
\t\t\t\t\t\t\t<span>Cloud Hosting</span>
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-success\">
\t\t\t\t\t\t\t<i class=\"ri-money-pound-circle-line me-1\"></i>
\t\t\t\t\t\t\tMoney</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-primary\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPayPal</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\">
\t\t\t\t\t\t\t<i class=\"ri-equalizer-line me-1\"></i>
\t\t\t\t\t\t\tSettings</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Block Button</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tCreate block level buttons by adding class
\t\t\t\t\t\t<code>.d-grid</code>
\t\t\t\t\t\tto parent div.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-grid gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-sm btn-primary\">Block Button</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-lg btn-success\">Block Button</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Group</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tWrap a series of buttons with
\t\t\t\t\t\t<code>.btn</code>
\t\t\t\t\t\tin
\t\t\t\t\t\t<code>.btn-group</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Left</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Middle</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Right</button>
\t\t\t\t\t</div>

\t\t\t\t\t<br>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">1</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">2</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">3</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">4</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">5</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">6</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">7</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">8</button>
\t\t\t\t\t</div>

\t\t\t\t\t<br>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">1</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">2</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">3</button>
\t\t\t\t\t\t<div class=\"btn-group\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
\t\t\t\t\t\t\t\tDropdown
\t\t\t\t\t\t\t\t<span class=\"caret\"></span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t<div class=\"dropdown-menu\">
\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-3\">
\t\t\t\t\t\t\t<div class=\"btn-group-vertical mb-2\">
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Top</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Middle</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Bottom</button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-md-3\">
\t\t\t\t\t\t\t<div class=\"btn-group-vertical mb-2\">
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Button 1</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Button 2</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
\t\t\t\t\t\t\t\t\tButton 3
\t\t\t\t\t\t\t\t\t<span class=\"caret\"></span>
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t\t<div class=\"dropdown-menu dropdown-menu-animated\">
\t\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"row\">
\t\t\t\t<div class=\"col-xl-12\">
\t\t\t\t\t<div class=\"card\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h4 class=\"header-title\">Toggle Button</h4>

\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t\t\t<code>data-bs-toggle=\"button\"</code>
\t\t\t\t\t\t\t\tto toggle a button’s
\t\t\t\t\t\t\t\t<code>active</code>
\t\t\t\t\t\t\t\tstate. If you’re pre-toggling a button, you must manually add the
\t\t\t\t\t\t\t\t<code>.active</code>
\t\t\t\t\t\t\t\tclass
\t\t\t\t\t\t\t\t<strong>and</strong>
\t\t\t\t\t\t\t\t<code>aria-pressed=\"true\"</code>
\t\t\t\t\t\t\t\tto ensure that it is conveyed appropriately to assistive technologies.</p>

\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"button\">Toggle button</button>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary active\" data-bs-toggle=\"button\" aria-pressed=\"true\">Active toggle button</button>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" disabled data-bs-toggle=\"button\">Disabled toggle button</button>

\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end card-->
\t\t\t\t</div>
\t\t\t\t<!--end col-->
\t\t\t\t<div class=\"col-xl-12\">
\t\t\t\t\t<div class=\"card\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h4 class=\"header-title\">Button tags</h4>

\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">The
\t\t\t\t\t\t\t\t<code>.btn</code>
\t\t\t\t\t\t\t\tclasses are designed to be used with the
\t\t\t\t\t\t\t\t<code>&lt;button&gt;</code>
\t\t\t\t\t\t\t\telement. However, you can also use these classes on
\t\t\t\t\t\t\t\t<code>&lt;a&gt;</code>
\t\t\t\t\t\t\t\tor
\t\t\t\t\t\t\t\t<code>&lt;input&gt;</code>
\t\t\t\t\t\t\t\telements (though some browsers may apply a slightly different rendering).</p>

\t\t\t\t\t\t\t<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Link</a>
\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"submit\">Button</button>
\t\t\t\t\t\t\t<input class=\"btn btn-primary\" type=\"button\" value=\"Input\">
\t\t\t\t\t\t\t<input class=\"btn btn-primary\" type=\"submit\" value=\"Submit\">
\t\t\t\t\t\t\t<input class=\"btn btn-primary\" type=\"reset\" value=\"Reset\">

\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end card-->
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!--end row-->
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-buttons.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  113 => 11,  103 => 10,  90 => 7,  80 => 6,  60 => 3,  37 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Buttons
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Buttons' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Default Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the button classes on an
\t\t\t\t\t\t<code>&lt;a&gt;</code>,
\t\t\t\t\t\t<code>&lt;button&gt;</code>, or
\t\t\t\t\t\t<code>&lt;input&gt;</code>
\t\t\t\t\t\telement.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Light</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\">Dark</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-link\">Link</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Outline</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-outline-**</code>
\t\t\t\t\t\tto quickly create a bordered buttons.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-primary\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-success\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-warning\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-info\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-pink\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-purple\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Light</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-dark\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Rounded</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.rounded-pill</code>
\t\t\t\t\t\tto default button to get rounded corners.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary rounded-pill\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary rounded-pill\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success rounded-pill\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger rounded-pill\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning rounded-pill\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info rounded-pill\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink rounded-pill\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple rounded-pill\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light rounded-pill\">Light</buttn>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark rounded-pill\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Outline Rounded</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-outline-**</code>
\t\t\t\t\t\tto quickly create a bordered buttons.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-primary rounded-pill\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary rounded-pill\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-success rounded-pill\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger rounded-pill\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-warning rounded-pill\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-info rounded-pill\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-pink rounded-pill\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-purple rounded-pill\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light rounded-pill\">Light</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-dark rounded-pill\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Soft Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-soft-**</code>
\t\t\t\t\t\tto quickly create a soft background color buttons.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-primary\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-secondary\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-success\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-danger\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-warning\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-info\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-pink\">Pink</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-purple\">Purple</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-dark\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Soft Rounded Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use a classes
\t\t\t\t\t\t<code>.btn-soft-**</code>
\t\t\t\t\t\t<code>.rounded-pill</code>
\t\t\t\t\t\tto quickly create a soft background color buttons with rounded.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-primary rounded-pill\">Primary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-secondary rounded-pill\">Secondary</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-success rounded-pill\">Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-danger rounded-pill\">Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-warning rounded-pill\">Warning</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-info rounded-pill\">Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-soft-dark rounded-pill\">Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button-Sizes</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tAdd
\t\t\t\t\t\t<code>.btn-lg</code>,
\t\t\t\t\t\t<code>.btn-sm</code>
\t\t\t\t\t\tfor additional sizes.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap align-items-center gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary btn-lg\">Large</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">Normal</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success btn-sm\">Small</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button-Disabled</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tAdd the
\t\t\t\t\t\t<code>disabled</code>
\t\t\t\t\t\tattribute to
\t\t\t\t\t\t<code>&lt;button&gt;</code>
\t\t\t\t\t\tbuttons.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" disabled>Info</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" disabled>Success</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" disabled>Danger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\" disabled>Dark</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Icon Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tIcon only button.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">
\t\t\t\t\t\t\t<i class=\"ri-heart-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\">
\t\t\t\t\t\t\t<i class=\"ri-windows-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\">
\t\t\t\t\t\t\t<i class=\"ri-music-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">
\t\t\t\t\t\t\t<i class=\"ri-shield-star-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\">
\t\t\t\t\t\t\t<i class=\"ri-thumb-up-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">
\t\t\t\t\t\t\t<i class=\"ri-keyboard-line\"></i>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">
\t\t\t\t\t\t\t<i class=\"ri-school-line\"></i>
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">
\t\t\t\t\t\t\t<i class=\"ri-hearts-fill me-1\"></i>
\t\t\t\t\t\t\t<span>Like</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">
\t\t\t\t\t\t\t<i class=\"ri-rocket-line me-1\"></i>
\t\t\t\t\t\t\t<span>Launch</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">
\t\t\t\t\t\t\t<i class=\"ri-server-line me-1\"></i>
\t\t\t\t\t\t\t<span>Cloud Hosting</span>
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-success\">
\t\t\t\t\t\t\t<i class=\"ri-money-pound-circle-line me-1\"></i>
\t\t\t\t\t\t\tMoney</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-primary\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPayPal</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\">
\t\t\t\t\t\t\t<i class=\"ri-equalizer-line me-1\"></i>
\t\t\t\t\t\t\tSettings</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Block Button</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tCreate block level buttons by adding class
\t\t\t\t\t\t<code>.d-grid</code>
\t\t\t\t\t\tto parent div.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-grid gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-sm btn-primary\">Block Button</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-lg btn-success\">Block Button</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Button Group</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tWrap a series of buttons with
\t\t\t\t\t\t<code>.btn</code>
\t\t\t\t\t\tin
\t\t\t\t\t\t<code>.btn-group</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Left</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Middle</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Right</button>
\t\t\t\t\t</div>

\t\t\t\t\t<br>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">1</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">2</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">3</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">4</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">5</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">6</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">7</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">8</button>
\t\t\t\t\t</div>

\t\t\t\t\t<br>

\t\t\t\t\t<div class=\"btn-group mb-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">1</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">2</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">3</button>
\t\t\t\t\t\t<div class=\"btn-group\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
\t\t\t\t\t\t\t\tDropdown
\t\t\t\t\t\t\t\t<span class=\"caret\"></span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t<div class=\"dropdown-menu\">
\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-3\">
\t\t\t\t\t\t\t<div class=\"btn-group-vertical mb-2\">
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Top</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Middle</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Bottom</button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-md-3\">
\t\t\t\t\t\t\t<div class=\"btn-group-vertical mb-2\">
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Button 1</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\">Button 2</button>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
\t\t\t\t\t\t\t\t\tButton 3
\t\t\t\t\t\t\t\t\t<span class=\"caret\"></span>
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t\t<div class=\"dropdown-menu dropdown-menu-animated\">
\t\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t\t\t<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"row\">
\t\t\t\t<div class=\"col-xl-12\">
\t\t\t\t\t<div class=\"card\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h4 class=\"header-title\">Toggle Button</h4>

\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t\t\t<code>data-bs-toggle=\"button\"</code>
\t\t\t\t\t\t\t\tto toggle a button’s
\t\t\t\t\t\t\t\t<code>active</code>
\t\t\t\t\t\t\t\tstate. If you’re pre-toggling a button, you must manually add the
\t\t\t\t\t\t\t\t<code>.active</code>
\t\t\t\t\t\t\t\tclass
\t\t\t\t\t\t\t\t<strong>and</strong>
\t\t\t\t\t\t\t\t<code>aria-pressed=\"true\"</code>
\t\t\t\t\t\t\t\tto ensure that it is conveyed appropriately to assistive technologies.</p>

\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"button\">Toggle button</button>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary active\" data-bs-toggle=\"button\" aria-pressed=\"true\">Active toggle button</button>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" disabled data-bs-toggle=\"button\">Disabled toggle button</button>

\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end card-->
\t\t\t\t</div>
\t\t\t\t<!--end col-->
\t\t\t\t<div class=\"col-xl-12\">
\t\t\t\t\t<div class=\"card\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h4 class=\"header-title\">Button tags</h4>

\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">The
\t\t\t\t\t\t\t\t<code>.btn</code>
\t\t\t\t\t\t\t\tclasses are designed to be used with the
\t\t\t\t\t\t\t\t<code>&lt;button&gt;</code>
\t\t\t\t\t\t\t\telement. However, you can also use these classes on
\t\t\t\t\t\t\t\t<code>&lt;a&gt;</code>
\t\t\t\t\t\t\t\tor
\t\t\t\t\t\t\t\t<code>&lt;input&gt;</code>
\t\t\t\t\t\t\t\telements (though some browsers may apply a slightly different rendering).</p>

\t\t\t\t\t\t\t<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Link</a>
\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"submit\">Button</button>
\t\t\t\t\t\t\t<input class=\"btn btn-primary\" type=\"button\" value=\"Input\">
\t\t\t\t\t\t\t<input class=\"btn btn-primary\" type=\"submit\" value=\"Submit\">
\t\t\t\t\t\t\t<input class=\"btn btn-primary\" type=\"reset\" value=\"Reset\">

\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end card-->
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!--end row-->
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->

{% endblock %}", "ui-buttons.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/ui-buttons.html.twig");
    }
}
