Button Widgets#

class Button(text: str | None = None, color: str | None = None, close: bool | None = None, size: str | None = None, disabled: bool | None = None, **kwargs: Any)[source]#

Bases: Block

Render a <button> with Bootstrap styling.

Example

from wildewidgets import Button

button = Button(text="My Button")

When rendered in the template with the wildewdigets template tag, this will produce:

<button type="button" class="button btn btn-secondary">My Button</button>
Keyword Arguments:

  • text – The text to use for the button

  • color – The Boostrap color class to use for the button

  • close – The Boostrap close icon will be used for the button

  • size – The Bootstrap button size - None, ‘sm’, ‘lg’

  • disabled – If True, the button will be disabled

block: str = 'button'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

close: bool = False#

If True, ignore text and make this into a Bootstrap “close” button with a close icon.

color: str = 'secondary'#

The Boostrap color class to use for the button

size: str | None = None#

If True, ignore text and make this into a Bootstrap “close” button with a close icon.

tag: str = 'button'#

The name of the HTML element to use as our tag, e.g. div

text: str = 'Button'#

The text to use for the button

class ButtonRow(*blocks: Any, **kwargs: Any)[source]#

Bases: Block

Renders a row of buttons with right alignment.

This class creates a horizontal row of buttons with right-aligned (end) justification using Bootstrap’s flexbox utilities. It’s useful for placing action buttons at the bottom of forms or dialogs.

Note

This class is planned for deprecation in favor of HorizontalLayoutBlock.

Example

from wildewidgets import Button, ButtonRow

save_button = Button(text="Save", color="primary")
cancel_button = Button(text="Cancel")
button_row = ButtonRow(save_button, cancel_button)

When rendered, this produces:

<div class="d-flex justify-content-end">
    <button type="button" class="button btn btn-primary">Save</button>
    <button type="button" class="button btn btn-secondary">Cancel</button>
</div>
Parameters:

*blocks – Button instances or other blocks to include in the row

Keyword Arguments:

**kwargs – Additional keyword arguments passed to the parent Block class

class CollapseButton(target: str | None = None, **kwargs: Any)[source]#

Bases: Button

Render a <button> with Bootstrap styling which toggles a collapse.

Example

… code-block:: python

from wildewidgets import CollapseButton

button = CollapseButton(text=”My Button”, target=’#mymodal’)

When rendered in the template with the wildewdigets template tag, this will produce:

… code-block:: html

<button type=”button” class=”button button–collapse btn btn-secondary”

data-toggle=”collapse” data-target=”#mymodal” aria-expanded=”false” aria-controls=”mymodal”>My Button</button>

Keyword Arguments:

target – The CSS target for the Bootstrap collapse

block: str = 'button button--collapse'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

target: str | None = None#

The CSS target for the Bootstrap collapse

class FormButton(**kwargs: Any)[source]#

Bases: Block

Render a <form> with optional hidden inputs and a submit button.

Example:

.. code-block:: python

    from wildewidgets import FormButton

    button = FormButton(
        text="Save",
        action='/my/form/action',
        data={'field1': 'value1'}
    )

When rendered in the template with the ``wildewdigets`` template tag, this
will produce:

.. code-block:: html

    <form action="/my/form/action" method="post" class="button-form">
        <input type="hidden" name="csrfmiddlewaretoken"
            value="__THE_CSRF_TOKEN__">
        <input type="hidden" name="field1" value="value1">
        <input type="submit" class="button button--submit btn btn-secondary"
            value="Save">
    </form>

All the constructor parameters can be set in a subclass of this class as class attributes. Parameters to the constructor override any defined class attributes.

Keyword Arguments:

  • text – The text to use for the button, defaults to ‘Button’

  • color – The Boostrap color class to use for the button, defaults to ‘secondary’

  • button_css_class – a string of classes to apply to the button, defaults to no classes.

  • button_attributes – Set any additional attributes for the button as key, value pairs, defaults to no additional attributes.

  • button_data_attributes – Set data- attributes for the button, defaults to no data attributes

get_context_data(*args, **kwargs) → dict[str, Any][source]#

Update the template context dictionary used when rendering this block.

Parameters:

*args – positional arguments (ignored)

Keyword Arguments:

**kwargs – the current context dictionary

Returns:

The updated context dictionary

block: str = 'button-form'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

tag: str = 'form'#

The name of the HTML element to use as our tag, e.g. div

template_name: str = 'wildewidgets/button--form.html'#

The name of the template to use to render this block

class InputButton(confirm_text: str | None = None, **kwargs: Any)[source]#

Bases: Button

Render an <input type="submit"> with Bootstrap button styling.

Example:

.. code-block:: python

    from wildewidgets import InputButton

    button = InputButton(text="Save")

When rendered in the template with the ``wildewdigets`` template tag, this
will produce:

.. code-block:: html

    <input type="submit"
        class="button button--submit btn btn-secondary" value="Save">
block: str = 'button--submit'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

tag: str = 'input'#

The name of the HTML element to use as our tag, e.g. div

template_name: str = 'wildewidgets/block--simple.html'#

The name of the template to use to render this block

class LinkButton(url: str | None = None, **kwargs: Any)[source]#

Bases: Button

Render an <a> with Bootstrap button styling which toggles a Bootstrap modal.

Example

… code-block:: python

from wildewidgets import LinkButton

button = LinkButton(text=”My Button”, url=’https://myexample.com’)

When rendered in the template with the wildewdigets template tag, this will produce:

… code-block:: html

<a href=”https://myexample.com”

class=”button button–link btn btn-secondary”> My Button

</a>

Keyword Arguments:

url – The URL for the href attribute of the <a> record, defaults to no URL.

block: str = 'button button--link'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

tag: str = 'a'#

The name of the HTML element to use as our tag, e.g. div

class ModalButton(target: str | None = None, **kwargs: Any)[source]#

Bases: Button

Render a <button> with Bootstrap styling which toggles a Bootstrap modal.

Example

from wildewidgets import ModalButton

button = ModalButton(text="My Button", target='#mymodal')

When rendered in the template with the wildewdigets template tag, this will produce:

<button type="button" class="button button--modal btn btn-secondary"
data-toggle="modal" data-target="#mymodal">My Button</button>
Keyword Arguments:

target – The CSS target for the Bootstrap modal

block: str = 'button button--modal'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

target: str | None = None#

The CSS target for the Bootstrap modal