Button

Documentation

All components Component Brickwork 4.3.1

Try it

Destructive submit

Open full-page preview

A form button that identifies the requested action.

Use for actions and navigation calls to action throughout Brickwork pages.

Settings

Choose a documented scenario or supported option. The address updates so the result can be shared.

Scenario

Option label

Option variant

Option size

Option type

Option loading

Option disabled

Option value

Reset

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

{% load brickwork_components %}
{% bw_button label=label type=type name=name value=value variant=variant size=size loading=loading disabled=disabled %}

context = {'label': 'Delete', 'button_type': 'submit', 'name': 'action', 'value': 'delete', 'variant': 'danger', 'size': 'md', 'loading': False, 'disabled': False, 'type': 'submit'}

Guide

Add it to your project

Load `brickwork_components`.
Call `bw_button`; set `href` only for navigation.
For icon-only calls, always provide `aria_label`.

View this component's source for the installed release

Options

Public API

Option	Type	Default	Required	Description
label	str	Empty string	No	Visible button text. Constraint: Use concise visible text that identifies the control or measurement.
variant	str	primary	No	Treatment. Allowed: primary, secondary, ghost, danger. Constraint: Use one of the documented variants; use `danger`, not an invented `error` severity.
size	str	md	No	Fixed control scale. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute.
type	str	button	No	Native button type when no href. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
href	str	Empty string	No	Renders a link-button. Constraint: Use a valid navigable URL and do not combine it with submit-only button fields.
icon	str	Empty string	No	Registered icon. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
icon_only	bool	False	No	Renders icon without visible label. Constraint: Requires non-empty aria_label.
loading	bool	False	No	Shows busy state and disables interaction. Constraint: Use only for a temporary loading state and replace it with real or error content.
disabled	bool	False	No	Disables the control; disabled links render as non-navigable spans. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
aria_label	str	Empty string	No	Accessible name for icon-only control. Constraint: Use a concise non-empty accessible name whenever the visible label does not name the control.
name	str	Empty string	No	Submitted name on button branch only. Constraint: Cannot be used with href.
value	str	Empty string	No	Submitted value. Constraint: Requires name and cannot be used with href.

Behaviour

Accessibility and responsive behaviour

Accessibility: Icon-only calls fail at render without an accessible name, and all sizes meet the target-size floor.
Responsive: No breakpoint switch.
Without JavaScript: Native button/link behaviour remains available; loading is a progressive state.

Need help?

Troubleshooting

Contract check: an icon-only button with no aria_label is a template error, never a

Provide a non-empty `aria_label` whenever `icon_only=True`; the tag rejects an unnamed icon-only button.

Explore next