menu-btn

{% props %}

{% props %}

Twig Tag

The {% props %} tag is used inside CMS partials to declare which parameters are props (template data) and which are attributes (HTML pass-through). When this tag is present, an attributes variable becomes available for rendering HTML attributes on elements.

___TWIG0___

The tag uses Twig hash syntax. Keys become template variables with their specified defaults, and any parameters passed by the caller that are not listed become part of the attributes bag.

# Basic Usage

A card partial that declares title as a prop and forwards everything else as HTML attributes:

___TWIG0___
___TWIG1___

<div ___TWIG2___>
    <h2>___TWIG3___</h2>
</div>

When rendered with extra attributes:

___TWIG0___

The output will be:

<div class="card mt-4" id="featured">
    <h2>Hello</h2>
</div>

The title parameter was declared as a prop, so it becomes a template variable. The class and id parameters were not listed, so they flow into the attributes bag.

# Hyphenated Attributes

Hyphenated attribute names such as data-* and aria-* can be passed directly to the partial tag and flow into the attributes bag like any other attribute:

___TWIG0___

The output preserves the original attribute names:

<div class="card" data-testid="featured-card" aria-label="Featured">
    <h2>Hello</h2>
</div>

# The Attributes Variable

The attributes variable is an instance of Laravel's ComponentAttributeBag. It supports the following methods:

MethodDescription
attributes.merge({class: 'btn'})Merge defaults with smart-appending for class and style
attributes.only('class', 'id')Keep only specific attributes
attributes.except('class')Exclude specific attributes
attributes.has('id')Check if an attribute exists
attributes.get('id')Get a single attribute value

When rendered (cast to string), the bag produces HTML attribute pairs: class="card mt-4" id="featured".

# Smart Class Merging

The merge method handles class and style attributes intelligently — the caller's values are appended to the defaults rather than replacing them.

___TWIG0___
<button ___TWIG1___>
    ___TWIG2___
</button>

___TWIG0___
    Click Me
___TWIG1___

Output: <button class="btn btn-primary mt-4 w-full">Click Me</button>

# Empty Props

Using {% props {} %} with an empty hash means all parameters go to attributes. This is useful for wrapper elements that only need HTML pass-through:

___TWIG0___
<div ___TWIG1___>___TWIG2___</div>

# Default Values

Props support default values that are used when the caller does not pass the parameter:

___TWIG0___

If the caller passes type="warning", the type variable will be "warning". If not passed, it defaults to "info".

# Working with Body Content

The {% props %} tag works naturally with the existing body keyword on partials. The body parameter is automatically excluded from the attribute bag.

___TWIG0___
___TWIG1___

<div ___TWIG2___>
    <div class="alert-content">___TWIG3___</div>

    ___TWIG4___
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    ___TWIG5___
</div>

___TWIG0___
    <strong>Warning!</strong> Something needs your attention.
___TWIG1___

# See Also

← {% for %} →