Démo HTML
JSX
type submit Button
< button type = "button" >type submit Button</ button > < Button >type submit Button</ Button >
Démo HTML
JSX
Button aria disabled Button disabled
< button type = "button" aria-disabled = "true" >Button aria disabled</ button >< button
type = "button" disabled >Button disabled</ button > < Button aria-disabled = "true" >Button aria disabled</ Button >
< Button disabled >Button disabled</ Button >
Démo HTML
JSX
Button with left iconButton with right
icon
< button type = "button" >< svg viewBox = "0 0 24 24" width = "24" height = "24"
fill = "currentColor" role = "img" > < path
d = "M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z" ></ path >
</ svg >Button with left icon</ button >< button type = "button" >Button with right
icon< svg viewBox = "0 0 24 24" width = "24" height = "24" fill = "currentColor"
role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button >
< Check slot = "before-button" />Button with left icon
</ Button >
< Button >
< Cross slot = "after-button" />Button with right icon
</ Button >
Démo HTML
JSX
< button type = "button" aria-label = "Delete" >< svg viewBox = "0 0 24 24" width = "24"
height = "24" fill = "currentColor" role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button aria-label = "Delete" >< Cross /></ Button >
Démo HTML
JSX
type submit Button
< button class = "reverse" type = "button" >type submit Button</ button > < Button variant = "reverse" >type submit Button</ Button >
Démo HTML
JSX
Button aria
disabled Button
disabled
< button class = "reverse" type = "button" aria-disabled = "true" >Button aria
disabled</ button >< button class = "reverse" type = "button" disabled >Button
disabled</ button > < Button variant = "reverse" aria-disabled = "true" >Button aria disabled</ Button >
< Button variant = "reverse" disabled >Button disabled</ Button >
Démo HTML
JSX
Button with left iconButton with right icon
< button class = "reverse" type = "button" >< svg viewBox = "0 0 24 24" width = "24"
height = "24" fill = "currentColor" role = "img" > < path
d = "M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z" ></ path >
</ svg >Button with left icon</ button >< button class = "reverse"
type = "button" >Button with right icon< svg viewBox = "0 0 24 24" width = "24"
height = "24" fill = "currentColor" role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "reverse" >
< Check slot = "before-button" />Button with left icon
</ Button >
< Button variant = "reverse" >
< Cross slot = "after-button" />Button with right icon
</ Button >
Démo HTML
JSX
< button class = "reverse" type = "button" aria-label = "Delete" >< svg
viewBox = "0 0 24 24" width = "24" height = "24" fill = "currentColor" role = "img" >
< path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "reverse" aria-label = "Delete" >< Cross /></ Button >
Démo HTML
JSX
type submit Button
< button class = "ghost" type = "button" >type submit Button</ button > < Button variant = "ghost" >type submit Button</ Button >
Démo HTML
JSX
Button aria
disabled Button
disabled
< button class = "ghost" type = "button" aria-disabled = "true" >Button aria
disabled</ button >< button class = "ghost" type = "button" disabled >Button
disabled</ button > < Button variant = "ghost" aria-disabled = "true" >Button aria disabled</ Button >
< Button variant = "ghost" disabled >Button disabled</ Button >
Démo HTML
JSX
Button with left iconButton
with right icon
< button class = "ghost" type = "button" >< svg viewBox = "0 0 24 24" width = "24"
height = "24" fill = "currentColor" role = "img" > < path
d = "M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z" ></ path >
</ svg >Button with left icon</ button >< button class = "ghost" type = "button" >Button
with right icon< svg viewBox = "0 0 24 24" width = "24" height = "24"
fill = "currentColor" role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "ghost" >
< Check slot = "before-button" />Button with left icon
</ Button >
< Button variant = "ghost" >
< Cross slot = "after-button" />Button with right icon
</ Button >
Démo HTML
JSX
< button class = "ghost" type = "button" aria-label = "Delete" >< svg viewBox = "0 0 24 24"
width = "24" height = "24" fill = "currentColor" role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "ghost" aria-label = "Delete" >< Cross /></ Button >
Démo HTML
JSX
type submit Button
< button class = "small" type = "button" >type submit Button</ button > < Button variant = "small" >type submit Button</ Button >
Démo HTML
JSX
Button aria
disabled Button
disabled
< button class = "small" type = "button" aria-disabled = "true" >Button aria
disabled</ button >< button class = "small" type = "button" disabled >Button
disabled</ button > < Button variant = "small" aria-disabled = "true" >Button aria disabled</ Button >
< Button variant = "small" disabled >Button disabled</ Button >
Démo HTML
JSX
Button with left iconButton
with right icon
< button class = "small" type = "button" >< svg viewBox = "0 0 24 24" width = "24"
height = "24" fill = "currentColor" role = "img" > < path
d = "M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z" ></ path >
</ svg >Button with left icon</ button >< button class = "small" type = "button" >Button
with right icon< svg viewBox = "0 0 24 24" width = "24" height = "24"
fill = "currentColor" role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "small" >
< Check slot = "before-button" />Button with left icon
</ Button >
< Button variant = "small" >
< Cross slot = "after-button" />Button with right icon
</ Button >
Démo HTML
JSX
< button class = "small" type = "button" aria-label = "Delete" >< svg viewBox = "0 0 24 24"
width = "24" height = "24" fill = "currentColor" role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "small" aria-label = "Delete" >< Cross /></ Button >
Démo HTML
JSX
Danger
< button class = "danger" type = "button" >Danger</ button > < Button variant = "danger" >Danger</ Button >
Démo HTML
JSX
Danger reverse
< button class = "danger reverse" type = "button" >Danger reverse</ button > < Button variant = "danger reverse" >Danger</ Button >
Démo HTML
JSX
Danger with left iconDanger with right icon
< button class = "danger" type = "button" >< svg viewBox = "0 0 24 24" width = "24"
height = "24" fill = "currentColor" role = "img" > < path
d = "M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z" ></ path >
</ svg >Danger with left icon</ button >< button class = "danger"
type = "button" >Danger with right icon< svg viewBox = "0 0 24 24" width = "24"
height = "24" fill = "currentColor" role = "img" > < path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "danger" >
< Check slot = "before-button" />Danger with left icon
</ Button >
< Button variant = "danger" >
< Cross slot = "after-button" />Danger with right icon
</ Button >
Démo HTML
JSX
< button class = "danger" type = "button" aria-label = "Delete" >< svg
viewBox = "0 0 24 24" width = "24" height = "24" fill = "currentColor" role = "img" >
< path
d = "M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z" ></ path >
</ svg ></ button > < Button variant = "danger" aria-label = "Delete" >< Cross /></ Button > Retour à la liste des composants