Bouton

Les boutons sont utilisés pour initier une action. Les labels des boutons expriment quelle action se produira lorsque l'utilisateur interagira avec eux.

Exemples

<kuik:button size="lg">Button lg</kuik:button>
<kuik:button status="error"><kuik:icon title="" source="icon://ui/asterisk" />Error<kuik:icon title="" source="icon://ui/asterisk" /></kuik:button>

Priority

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Priority" level="3" />

<p>
    <kuik:button>Primary</kuik:button>
    <kuik:button priority="secondary">Secondary</kuik:button>
    <kuik:button priority="tertiary">Tertiary</kuik:button>
</p>

Status

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Status" level="3" />

<p>
    <kuik:button status="neutral">Neutral</kuik:button>
    <kuik:button status="accent">Accent</kuik:button>
    <kuik:button status="success">Success</kuik:button>
    <kuik:button status="error">Error</kuik:button>
</p>
<p>
    <kuik:button priority="secondary" status="neutral">Neutral</kuik:button>
    <kuik:button priority="secondary" status="accent">Accent</kuik:button>
    <kuik:button priority="secondary" status="success">Success</kuik:button>
    <kuik:button priority="secondary" status="error">Error</kuik:button>
</p>
<p>
    <kuik:button priority="tertiary" status="neutral">Neutral</kuik:button>
    <kuik:button priority="tertiary" status="accent">Accent</kuik:button>
    <kuik:button priority="tertiary" status="success">Success</kuik:button>
    <kuik:button priority="tertiary" status="error">Error</kuik:button>
</p>

Size

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Size" level="3" />

<p>
    <kuik:button size="sm"><kuik:icon title="" source="icon://ui/asterisk" />Button sm<kuik:icon title="" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button size="md"><kuik:icon title="" source="icon://ui/asterisk" />Button md<kuik:icon title="" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button size="lg"><kuik:icon title="" source="icon://ui/asterisk" />Button lg<kuik:icon title="" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button size="xl"><kuik:icon title="" source="icon://ui/asterisk" />Button xl<kuik:icon title="" source="icon://ui/asterisk" /></kuik:button>
</p>

Selected

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Selected" level="3" />

<p>
    <kuik:button selected="true">Selected</kuik:button>
    <kuik:button selected="false">Not selected</kuik:button>
</p>

Icon

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Icon" level="3" />

<p>
    <kuik:button size="sm" icon="true"><kuik:icon title="" size="sm" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button size="md" icon="true"><kuik:icon title="" size="md" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button size="lg" icon="true"><kuik:icon title="" size="lg" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button size="xl" icon="true"><kuik:icon title="" size="xl" source="icon://ui/asterisk" /></kuik:button>
</p>
<p>
    <kuik:button priority="secondary" size="sm" icon="true"><kuik:icon title="" size="sm" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button priority="secondary" size="md" icon="true"><kuik:icon title="" size="md" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button priority="secondary" size="lg" icon="true"><kuik:icon title="" size="lg" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button priority="secondary" size="xl" icon="true"><kuik:icon title="" size="xl" source="icon://ui/asterisk" /></kuik:button>
</p>
<p>
    <kuik:button priority="tertiary" size="sm" icon="true"><kuik:icon title="" size="sm" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button priority="tertiary" size="md" icon="true"><kuik:icon title="" size="md" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button priority="tertiary" size="lg" icon="true"><kuik:icon title="" size="lg" source="icon://ui/asterisk" /></kuik:button>
    <kuik:button priority="tertiary" size="xl" icon="true"><kuik:icon title="" size="xl" source="icon://ui/asterisk" /></kuik:button>
</p>

Disabled

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Disabled" level="3" />

<p>
    <kuik:button disabled="true">Disabled</kuik:button>
    <kuik:button>Not disabled</kuik:button>
</p>

Name	Type	Required	Description
priority	java.lang.String	false
status	java.lang.String	false
size	java.lang.String	false	Taille (défaut : sm)
icon	java.lang.Boolean	false
selected	java.lang.Boolean	false
type	java.lang.String	false
nowrap	java.lang.Boolean	false	Indique si le bouton doit rester sur une seule ligne (défaut : false)

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="priority" required="false" type="java.lang.String" %>
<%@ attribute name="status" required="false" type="java.lang.String" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="icon" required="false" type="java.lang.Boolean" %>
<%@ attribute name="selected" required="false" type="java.lang.Boolean" %>
<%@ attribute name="type" required="false"  type="java.lang.String" %>
<%@ attribute name="nowrap" required="false" type="java.lang.Boolean" description="Indique si le bouton doit rester sur une seule ligne (défaut : false)" %>

<c:if test="${empty pageScope.priority}">
    <c:set var="priority" value="primary" />
</c:if>
<c:set var="classesPriority" value="button--${pageScope.priority}"/>

<c:if test="${empty pageScope.size}">
    <c:set var="size" value="sm" />
</c:if>
<c:set var="classesSize" value="button--${pageScope.size}"/>

<c:if test="${pageScope.icon}">
    <c:set var="classesIcon" value="button--icon-only"/>
</c:if>

<c:if test="${empty pageScope.type}">
    <c:set var="type" value="button" />
</c:if>

<c:if test="${not empty pageScope.status}">
    <c:set var="classesStatus" value="button--${pageScope.status}"/>
</c:if>

<c:if test="${pageScope.selected}">
    <c:set var="classesSelected" value="button--selected"/>
</c:if>

<c:if test="${pageScope.nowrap}">
    <c:set var="classesNowrap" value="button--no-wrap" />
</c:if>

<c:set value="button ${pageScope.classesPriority} ${pageScope.classesSize} ${pageScope.classesStatus} ${pageScope.classesIcon} ${pageScope.classesSelected} ${pageScope.classesNowrap}" var="classes"/>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<button type="${pageScope.type}" class="${pageScope.classes}" ${pageScope.attributes}>
    <jsp:doBody/>
</button>

@use 'abstract/button' as abstractButton;
@use 'mixins/mixins-customizables' as custom;

$prefix: 'button';

.button {
    @extend %button;
}

@each $priority in custom.$priorities {
    .button--#{$priority} {
        @extend %button--#{$priority};

        @each $status in custom.$statuses {
            &.button--#{status} {
                @extend %button--#{$status}
            }
        }
    }
}

@each $size in custom.$sizes {
    .button--#{$size} {
        @extend %button--#{$size};
    }
}

// Bouton avec un icone seulement
.button--icon-only {
    --#{$prefix}-padding-h: var(--#{$prefix}-padding-v);
}

.button:focus {
    outline: var(--line-xs) solid var(--color1-60);
    outline-offset: var(--line-2xs);
}

.button--selected {
    box-shadow: 0 0 0 var(--line-xs) var(--success-40);
}

.button--block {
    inline-size: 100%;
}

.button--rounded {
    border-radius: var(--size-infinite);
}

.button--vertical {
    flex-direction: column;

    svg {
        vertical-align: top;
    }
}

.button--no-wrap {
    flex-wrap: nowrap;
}