Bouton

Le composant button peut se composer soit d'un label entouré de 2 pictos, d'un label seul, mais aussi d'un picto seul.

Classes du composant

Modificateurs d'apparence

.button--primary : Primaire
.button--secondary : Secondaire
.button--tertiary : Tertiaire

Modificateurs d'états

.button--success : Succès
.button--error : Erreur
.button--neutral : Neutre
.button--selected : Sélectionné

Modificateurs de tailles

.button--sm : Small
.button--md : Medium
.button--lg : Large
.button--xl : Extra-large
.button--icon-sm : Small
.button--icon-md : Médium
.button--icon-lg : Large
.button--icon-xl : Extra-large

Modificateurs de disposition

.button--vertical : Disposition vertical des éléments dans le bouton

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

Size

Status

Icon

Selected

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="Priority" level="3" />

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

<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>

<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>

<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>

<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>


<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)

$prefix: 'button';

.button {
  @include custom-space($prefix, true);
  @include custom-border($prefix, true);
  @include custom-color($prefix, true);
  @include custom-typo($prefix, true);
  @include custom-icon;

  align-items: center;
  cursor: pointer;
  display: inline flex;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  vertical-align: baseline;

  svg {
    flex-shrink: 0;
  }
}

.button--primary, .button--secondary, .button--tertiary {
  @include custom-color($prefix);
  @include custom-border($prefix);

  &:hover {
    @include custom-color($prefix);
  }

  &:focus {
    @include custom-color($prefix);
  }


  &.button--neutral, &.button--accent, &.button--success, &.button--error {
    @include custom-color($prefix);
    @include custom-icon;

    &:hover {
      @include custom-color($prefix);
      @include custom-icon;
    }

    &:focus {
      @include custom-color($prefix);
      @include custom-icon;
    }
  }

}

// Tailles
.button--sm {
  @include custom-space($prefix);
  @include custom-typo($prefix);

  --max-width: 20rem;
}

.button--md {
  @include custom-space($prefix);
  @include custom-typo($prefix);

  --max-width: var(--size-160);
}

.button--lg {
  @include custom-space($prefix);
  @include custom-typo($prefix);

  --max-width: var(--size-160);
}

.button--xl {
  @include custom-space($prefix);
  @include custom-typo($prefix);

  --max-width: var(--size-160);
}

// 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 {
  width: 100%;
}

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

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

  svg {
    vertical-align: top;
  }
}

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

<%@ 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>