#Button

A button is a clickable element that allows the user to perform an action. It can be used to submit forms, trigger events, or navigate to different pages. Buttons can have different styles and states, such as primary, secondary, danger, disabled, and loading.
The component forwards native button attributes and adds state attributes such as aria-busy and aria-pressed. Add an accessible name with visible text or aria-label, especially for icon-only buttons.

#API

Button extends the native ButtonHTMLAttributes<HTMLButtonElement> properties.

• variant: primary, secondary (default), danger, transparent or success.
• loading: disables the button and sets aria-busy="true".
• ripple: enables or disables the ripple effect. It is enabled by default except for the transparent variant.
• pressed: exposes the active state through aria-pressed.
• tooltip: set to "true" to enable the CSS tooltip. Its text comes from the aria-label.
• width: a number in pixels or any valid CSS width value.
• type: defaults to button.

#Basic Buttons

#Disabled Buttons

#Loading Buttons

This is useful when you are waiting before being able to do an action. The button becomes disabled, sets aria-busy="true", and uses the loading cursor.

#Buttons with tooltip

You can easily add a tooltip to a button by using the useTooltip hook. The tooltip will be shown on hover and focus. You can also use the simple tooltip API made entirely in CSS.

#Icon Buttons

An icon button is just the use of a button with an icon with it. You don't need to put an aria-label on the icon but on the button !

#Buttons with icon

#Buttons pressed

Those buttons have two states : active or inactive. By default they are inactive, so it is like a normal button. This is the parent component that will manage the state of the button.