Button Component
A component for creating buttons with Bootstrap 5 styles.
Core Parameters:
- text: string - Button text (optional)
- type: string - Button type (button, submit, reset) (default: 'button')
- tag: string - HTML tag to use (button, a, input) (default: 'button')
- href: string - URL for anchor tag buttons (required when tag is 'a')
Style Parameters:
- variant: string - Button variant (primary, secondary, success, danger, warning, info, light, dark, link) (default: 'primary')
- outline: boolean - Whether to use outline variant (default: false)
- size: string - Button size (sm, lg) (optional)
- block: boolean - Whether to make the button full width (default: false)
- class: string - Additional CSS classes (optional)
Icon Parameters:
- icon: string - Icon name (e.g., 'arrow-right', 'check') (optional)
- icon_position: string - Icon position (start, end) (default: 'start')
State Parameters:
- disabled: boolean - Disable the button (default: false)
- active: boolean - Set active state (default: false)
- loading: boolean - Show loading state (default: false)
- loading_text: string - Text to show while loading (default: 'Loading...')
Advanced Parameters:
- attributes: string - Additional HTML attributes (optional)
Example Usage:
1. Basic Button:
{{ component('buttons/button', {
text: 'Click Me',
variant: 'primary'
}) }}
2. Link Button with Icon:
{{ component('buttons/button', {
text: 'Learn More',
tag: 'a',
href: '#',
icon: 'arrow-right',
icon_position: 'end'
}) }}
3. Loading State:
{{ component('buttons/button', {
text: 'Save Changes',
variant: 'success',
loading: true,
loading_text: 'Saving...'
}) }}
All available options for the Button component
ThemedComponent::make("buttons/button")
->active('value') //boolean - Set active state (default: false)
->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
->block('value') //boolean - Whether to make the button full width (default: false)
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional CSS classes (optional)
->disabled('value') //boolean - Disable the button (default: false)
->href('value') //string - URL for anchor tag buttons (required when tag is 'a')
->icon('value') //string - Icon name (e.g., 'arrow-right', 'check') (optional)
->icon_position('value') //string - Icon position (start, end) (default: 'start')
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->loading('value') //boolean - Show loading state (default: false)
->loading_text('value') //string - Text to show while loading (default: 'Loading...')
->outline('value') //boolean - Whether to use outline variant (default: false)
->size('value') //string - Button size (sm, lg) (optional)
->tag('value') //string - HTML tag to use (button, a, input) (default: 'button')
->text('value') //string - Button text (optional)
->type('value') //string - Button type (button, submit, reset) (default: 'button')
->variant('value') //string - Button variant (primary, secondary, success, danger, warning, info, light, dark, link) (default: 'primary')
->render();
Standard button styles for actions in forms, dialogs, and more.
$variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link'];
foreach ($variants as $variant) {
echo ThemedComponent::make('buttons/button')
->variant($variant)
->text(ucfirst($variant))
->class('me-2 mb-2')
->render();
}
Alternative button styles with transparent backgrounds.
$variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
foreach ($variants as $variant) {
echo ThemedComponent::make('buttons/button')
->variant($variant)
->outline(true)
->text(ucfirst($variant))
->class('me-2 mb-2')
->render();
}
Different button sizes for varied contexts.
$sizes = ['sm', null, 'lg'];
foreach ($sizes as $size) {
$label = $size ? ucfirst($size) : 'Default';
echo ThemedComponent::make('buttons/button')
->variant('primary')
->size($size)
->text($label . ' button')
->class('me-2 mb-2')
->render();
}
Buttons with icons for enhanced visual communication.
$icons = [
['text' => 'Add', 'icon' => 'plus-circle'],
['text' => 'Edit', 'icon' => 'pencil'],
['text' => 'Delete', 'icon' => 'trash', 'variant' => 'danger'],
['text' => 'Next', 'icon' => 'arrow-right', 'icon_position' => 'end'],
];
foreach ($icons as $icon) {
echo ThemedComponent::make('buttons/button')
->variant($icon['variant'] ?? 'primary')
->text($icon['text'])
->icon($icon['icon'])
->iconPosition($icon['icon_position'] ?? 'start')
->class('me-2 mb-2')
->render();
}
Various button states including active, disabled, and loading.
// Normal state
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Normal')
->class('me-2 mb-2')
->render();
// Active state
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Active')
->active(true)
->class('me-2 mb-2')
->render();
// Disabled state
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Disabled')
->disabled(true)
->class('me-2 mb-2')
->render();
// Loading state
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Loading...')
->loading(true)
->class('me-2 mb-2')
->render();
Full-width buttons that span the entire width of the parent element.
// Block button
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Block Button')
->block(true)
->class('mb-2')
->render();
// Responsive block button
echo ThemedComponent::make('buttons/button')
->variant('secondary')
->text('Responsive Block Button')
->block('sm')
->class('mb-2')
->render();
Buttons can be rendered as different HTML elements.
// Button tag (default)
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Button')
->class('me-2 mb-2')
->render();
// Anchor tag
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Link')
->tag('a')
->href('#!')
->class('me-2 mb-2')
->render();
// Input tag
echo ThemedComponent::make('buttons/button')
->variant('primary')
->text('Input')
->tag('input')
->type('submit')
->class('me-2 mb-2')
->render();
Link
Input
The Twig template file for the Button component
{# Button Component
A component for creating buttons with Bootstrap 5 styles.
Core Parameters:
- text: string - Button text (optional)
- type: string - Button type (button, submit, reset) (default: 'button')
- tag: string - HTML tag to use (button, a, input) (default: 'button')
- href: string - URL for anchor tag buttons (required when tag is 'a')
Style Parameters:
- variant: string - Button variant (primary, secondary, success, danger, warning, info, light, dark, link) (default: 'primary')
- outline: boolean - Whether to use outline variant (default: false)
- size: string - Button size (sm, lg) (optional)
- block: boolean - Whether to make the button full width (default: false)
- class: string - Additional CSS classes (optional)
Icon Parameters:
- icon: string - Icon name (e.g., 'arrow-right', 'check') (optional)
- icon_position: string - Icon position (start, end) (default: 'start')
State Parameters:
- disabled: boolean - Disable the button (default: false)
- active: boolean - Set active state (default: false)
- loading: boolean - Show loading state (default: false)
- loading_text: string - Text to show while loading (default: 'Loading...')
Advanced Parameters:
- attributes: string - Additional HTML attributes (optional)
Example Usage:
1. Basic Button:
{{ component('buttons/button', {
text: 'Click Me',
variant: 'primary'
}) }}
2. Link Button with Icon:
{{ component('buttons/button', {
text: 'Learn More',
tag: 'a',
href: '#',
icon: 'arrow-right',
icon_position: 'end'
}) }}
3. Loading State:
{{ component('buttons/button', {
text: 'Save Changes',
variant: 'success',
loading: true,
loading_text: 'Saving...'
}) }}
#}
{% set button_classes = ['btn'] %}
{# Add variant classes #}
{% set variant = content.variant|default('primary') %}
{% if content.outline %}
{% set button_classes = button_classes|merge(['btn-outline-' ~ variant]) %}
{% else %}
{% set button_classes = button_classes|merge(['btn-' ~ variant]) %}
{% endif %}
{# Add size classes #}
{% if content.size %}
{% set button_classes = button_classes|merge(['btn-' ~ content.size]) %}
{% endif %}
{# Add block class #}
{% if content.block %}
{% set button_classes = button_classes|merge(['d-block', 'w-100']) %}
{% endif %}
{# Add active class #}
{% if content.active %}
{% set button_classes = button_classes|merge(['active']) %}
{% endif %}
{# Add custom classes #}
{% if content.class %}
{% set button_classes = button_classes|merge(content.class|split(' ')) %}
{% endif %}
{# Determine the HTML tag #}
{% set tag = content.tag|default('button') %}
{# Build the button #}
<{{ tag }}
{% if content.id %}
id="{{ content.id }}"
{% endif %}
{% if tag == 'button' %}
type="{{ content.type|default('button') }}"
{% endif %}
{% if tag == 'a' %}
href="{{ content.href|default('#!') }}"
role="button"
{% endif %}
class="{{ button_classes|join(' ') }}"
{% if content.disabled %}disabled{% endif %}
{% if content.loading %}
disabled
data-loading="true"
{% endif %}
{% if content.attributes %}
{{ content.attributes }}
{% endif %}
>
{% if content.loading %}
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
{{ content.loading_text|default('Loading...') }}
{% else %}
{% set icon_position = content.icon_position|default('start') %}
{% if content.icon and icon_position != 'end' %}
{{ component('icons/icon', { name: content.icon, class: content.text ? 'me-2' : '' }) }}
{% endif %}
{% if content.text %}
{{ content.text }}
{% endif %}
{% if content.icon and icon_position == 'end' %}
{{ component('icons/icon', { name: content.icon, class: content.text ? 'ms-2' : '' }) }}
{% endif %}
{% endif %}
</{{ tag }}>