Generic Arguments

Generic Attributes

All andach components support a set of generic attributes that provide a consistent interface for styling and behaviour. These attributes can be used across all components and interact with the configuration settings for variant, size, and attributes.

Overview

Each component includes the following generic attributes. Most are booleans that default to null, which means they defer to the default setting in the component's configuration file. They are not disabled by default unless the config explicitly sets them that way.

public ?bool $accent = null,
        public ?bool $active = null,
        public ?bool $animate = null,
        public ?bool $background = null,
        public ?bool $border = null,
        public ?bool $divide = null,
        public ?bool $focus = null,
        public ?bool $full = null,
        public ?bool $gradient = null,
        public ?bool $hollow = null,
        public ?bool $hover = null,
        public ?bool $pageBackground = null,
        public ?bool $ring = null,
        public ?bool $rounded = null,
        public ?bool $shadow = null,
        public ?string $size = null,
        public ?string $variant = null,

Attribute Inheritance

When an attribute is set to null, it is not ignored. Instead, it inherits its behaviour and styling from the component’s configuration under the attributes section. To override this, you must explicitly pass true or false as needed.

This is the default alert using inherited attributes.

<x-andach-alert>This is the default alert using inherited attributes.</x-andach-alert>

Customising Attributes

Each component defines which attributes are available and their default enabled state through the attributes array. For example, an alert component might include:

'attributes' => [
    'border'  => [true, 'border-2'],
    'ring'    => [false, 'ring-2 ring-offset-2'],
    'rounded' => [true, 'rounded'],
    'shadow'  => [false, 'shadow-md'],
],

The first value indicates if the attribute is enabled by default. The second value is the Tailwind class used when the attribute is active. When you set an attribute to null or omit it, this default setting is used.

To disable an attribute entirely, remove the key from the attributes array. To enable a new one, add it to the array and provide an appropriate Tailwind class.

This alert has ring and shadow applied manually.

<x-andach-alert ring shadow>This alert has ring and shadow applied manually.</x-andach-alert>

Variants

The variant attribute selects a variant preset, which defines contextual styling for the component such as colours, background, borders, hover states, and so on.

'default' => [
    'background'          => 'bg-white dark:bg-slate-900',
    'pageBackground'      => 'bg-slate-100 dark:bg-slate-800',
    'text'                => 'text-slate-800 dark:text-slate-200',
    'border'              => 'border-slate-200 dark:border-slate-700',
    'shadow'              => 'shadow-slate-300/50 dark:shadow-slate-900/50',
    'ring'                => 'ring-slate-200 dark:ring-slate-700 ring-offset-slate-100 dark:ring-offset-slate-800',
    'hover'               => 'hover:bg-slate-300 hover:dark:bg-slate-900 hover:from-slate-400 hover:to-slate-700 hover:text-slate-800/70 hover:dark:text-slate-400/70',
    'focus'               => 'focus-within:outline focus-within:outline-slate-600 dark:focus-within:outline-slate-400 focus-within:outline-2',
    'active'              => 'bg-slate-300 dark:bg-slate-900 from-slate-400 to-slate-700',
    'gradient'            => 'bg-gradient-to-br from-slate-200 to-slate-100 text-slate-800',
    'divide'              => 'divide-slate-300 dark:divide-slate-700',
    'accent'              => 'accent-slate-600 hover:accent-slate-700',
    'errorBorder'         => 'border-red-800 dark:border-red-400',
    'errorText'           => 'text-red-800 dark:text-red-400',
    'highlightBorder'     => 'border-slate-700',
    'highlightDarkBorder' => 'dark:border-slate-100',
    'inactiveBorder'      => 'border-slate-100',
    'inactiveDarkBorder'  => 'dark:border-slate-700',
],

If a variant contains a key that matches an attribute name (e.g., hover or ring), and that attribute is active, the corresponding classes are added to the component.

This alert uses the 'error' variant and explicitly enables background and hover styling.

<x-andach-alert variant="error" background hover>
    This alert uses the 'error' variant and explicitly enables background and hover styling.
</x-andach-alert>

Special Behaviour

Active

If active=true, the component will use the active styles defined in the variant. This may override background, gradient, and similar properties.

This alert uses active colours from the variant.

<x-andach-alert active>
    This alert uses active colours from the variant.
</x-andach-alert>

Page Background

If pageBackground=true, the background styling is taken from the pageBackground entry of the selected variant. This is commonly used for layout-level or nested components.

This alert uses the page background colour.

<x-andach-alert pageBackground>
    This alert uses the page background colour.
</x-andach-alert>

Sizing

The size attribute controls padding, font size, spacing, and other layout properties based on the configuration for the selected component. Sizing may be applied to the base element and/or sub-elements. In this case, the same sizing selection is used for everything. If no size array is specified for an item or any sub-elements, this attribute will do nothing. In the case of the default alert config, as below, the base element, title and dismiss icon will all change with the change of size.

'alert' => [
    'base'     => 'flex flex-wrap items-center mb-4',
    'elements' => [
        'content' => [
            'base' => 'flex flex-col flex-1 gap-1',
        ],
        'title' => [
            'base'  => 'font-bold',
            'sizes' => [
                'xs'   => 'text-base',
                'sm'   => 'text-lg',
                'base' => 'text-xl',
                'lg'   => 'text-2xl',
                'xl'   => 'text-3xl',
            ],
        ],
        'dismiss-button' => [
            'base'  => '',
        ],
        'dismiss-icon' => [
            'base'  => 'fill-current text-inherit over:opacity-75 ease-in-out duration-300',
            'sizes' => [
                'xs'   => 'w-2',
                'sm'   => 'w-3',
                'base' => 'w-4',
                'lg'   => 'w-5',
                'xl'   => 'w-6',
            ],
        ],
    ],
    'sizes' => [
        'xs'   => 'text-xs px-2 py-1 gap-3',
        'sm'   => 'text-sm px-3 py-2 gap-4',
        'base' => 'text-base px-4 py-3 gap-5',
        'lg'   => 'text-lg px-5 py-4 gap-6',
        'xl'   => 'text-xl px-6 py-5 gap-7',
    ],
    'attributes' => [
        'border'  => [true, 'border-2'],
        'ring'    => [false, 'ring-2 ring-offset-2'],
        'rounded' => [true, 'rounded'],
        'shadow'  => [false, 'shadow-md'],
    ],
],

This alert uses the large size configuration.

<x-andach-alert size="lg">
    This alert uses the large size configuration.
</x-andach-alert>

Extending Generic Attributes

You can freely modify or extend the list of generic attributes supported by a component by editing the attributes section in the component's config. For example, changing the alert config to the below will enable the hover option (by default, which can be disabled by passing false to any individual component call), and remove the ring option.

'attributes' => [
    'border'  => [true, 'border-2'],
    'hover'   => [true, 'transition hover:opacity-75'],
    'rounded' => [true, 'rounded'],
    'shadow'  => [false, 'shadow-md'],
],

To define custom variants, simply add additional entries to the variant array. You can then pass them in as the variant prop on any component.