Button

component

A button, or a link that looks like one with as="a".

Preview

Light

Code

<twig:Button variant="outline">Save</twig:Button>

Dark

Code

<twig:Button variant="outline">Save</twig:Button>

Try it

Change the props; the example is rendered again by the server.

variant size as loading

<twig:Button variant="outline">Save</twig:Button>

Variants

`variant`

The visual style variant.

variant="default"

variant="secondary"

variant="destructive"

variant="outline"

variant="ghost"

variant="link"

`size`

The button size.

size="default"

size="xs"

size="sm"

size="lg"

size="icon"

size="icon-xs"

size="icon-sm"

size="icon-lg"

`as`

The HTML tag to render; use a when the button navigates.

as="button"

Save

as="a"

`loading`

Whether an action is running: the button is marked busy.

loading="false"

loading="true"

Usage

All events

Code

<twig:Button type="submit">Save</twig:Button>
<twig:Button as="a" href="/events" variant="link">All events</twig:Button>
<twig:Button variant="ghost" size="sm" aria-pressed="true">Month</twig:Button>
<twig:Button :loading="true">Sending</twig:Button>

Installation

php bin/console ux:install button --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`variant`	`'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'`	`'default'`	The visual style variant.
`size`	`'default'\|'xs'\|'sm'\|'lg'\|'icon'\|'icon-xs'\|'icon-sm'\|'icon-lg'`	`'default'`	The button size.
`as`	`'button'\|'a'`	`'button'`	The HTML tag to render; use `a` when the button navigates.
`loading`	`bool`	`false`	Whether an action is running: the button is marked busy.

Accessibility

A toggle takes aria-pressed, a link to the page shown aria-current: any attribute reaches the element. With loading the button says aria-busy.

Files to copy

templates/components/Button.html.twig

{%- props
    ## 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant.
    variant = 'default',
    ## 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size.
    size = 'default',
    ## 'button'|'a' The HTML tag to render; use `a` when the button navigates.
    as = 'button',
    ## bool Whether an action is running: the button is marked busy.
    loading = false
-%}
{%- set _tag = as is same as('a') ? 'a' : 'button' -%}
{%- set _variant = {default: 'isPrimary', secondary: 'isSecondary', destructive: 'isDanger', outline: 'isOutline', ghost: 'isGhost', link: 'isLink'}[variant] ?? 'isPrimary' -%}
{%- set _size = {xs: 'isSmall', sm: 'isSmall', lg: 'isLarge', icon: 'hasIcon isIconOnly', 'icon-xs': 'hasIcon isIconOnly isSmall', 'icon-sm': 'hasIcon isIconOnly isSmall', 'icon-lg': 'hasIcon isIconOnly isLarge'}[size] ?? '' -%}
<{{ _tag }} data-slot="{{ attributes.render('data-slot')|default('button') }}" data-variant="{{ variant }}" data-size="{{ size }}"{% if loading %} aria-busy="true"{% endif %}{{ attributes.defaults({class: ((_tag is same as('a') ? 'isButton ' : '') ~ _variant ~ ' ' ~ _size ~ (loading ? ' isLoading' : ''))|trim|replace({'  ': ' '}), type: _tag is same as('button') ? 'button' : false}) }}>
{##- The button label and/or icon. -#}
{%- block content %}{% endblock -%}
</{{ _tag }}>