DropdownButton

Basic

{% component "DropdownButton" title="Dropdown button" variant="secondary" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Something else here{% endcomponent %}
            {% endcomponent %}

Preview:

Variant Primary

{% component "DropdownButton" title="Primary" variant="primary" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Variant Success

{% component "DropdownButton" title="Success" variant="success" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Variant Danger

{% component "DropdownButton" title="Danger" variant="danger" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Variant Warning

{% component "DropdownButton" title="Warning" variant="warning" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Variant Info

{% component "DropdownButton" title="Info" variant="info" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Variant Light

{% component "DropdownButton" title="Light" variant="light" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Variant Dark

{% component "DropdownButton" title="Dark" variant="dark" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Size Large

{% component "DropdownButton" title="Large button" variant="secondary" size="lg" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Size Small

{% component "DropdownButton" title="Small button" variant="secondary" size="sm" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Dark Menu

{% component "DropdownButton" title="Dropdown" variant="secondary" dark=True %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

{% component "DropdownButton" title="Dropdown" variant="secondary" align="end" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Basic Split Button

{% component "SplitButton" title="Primary" variant="primary" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Something else here{% endcomponent %}
              {% component "DropdownDivider" / %}
              {% component "DropdownItem" href="#" %}Separated link{% endcomponent %}
            {% endcomponent %}

Preview:

Split Button Danger

{% component "SplitButton" title="Danger" variant="danger" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
              {% component "DropdownDivider" / %}
              {% component "DropdownItem" href="#" %}Separated link{% endcomponent %}
            {% endcomponent %}

Preview:

Split Button Success

{% component "SplitButton" title="Success" variant="success" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Split Button Large

{% component "SplitButton" title="Large button" variant="primary" size="lg" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Split Button Small

{% component "SplitButton" title="Small button" variant="secondary" size="sm" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Split Button Custom Toggle Label

{% component "SplitButton" title="Action" variant="primary" toggle_label="Custom toggle" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview: