Button

Allows users to take actions, and make choices.

Filled Buttons

Filled buttons are high-emphasis, distinguished by their use of fill. They indicate the main action to your app.

You can add the elevation and have the raised version of the button with the raised property.

Outlined buttons are medium-emphasis buttons. They indicate a series of actions without a primary priority to your app.

Inlined buttons are used for the most secondary action.

Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize imagery more easily than plain text.

Icon buttons don't have any labels or texts but instead they have an icon as their main content.

To have the larger or smaller buttons, use the size property.

Disabled buttons do not respond to any action.

To have a rounded version of buttons use rounded property.

Learn more about the properties and the customization points.

import Button from "@sonnat/ui/Button";
import IconButton from "@sonnat/ui/IconButton";

//or
import { Button, IconButton } from "@sonnat/ui";

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

The properties that are common to normal and icon buttons.

Buttons Shared Properties
Name	Type	Default	Description
as	elementType	"button"	The component used for the root node. Either a string to use a HTML element or a component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
rounded	boolean	false	If `true`, the button will be rounded.
disabled	boolean	false	If `true`, the button will be disabled.
raised	boolean	false	If `true`, the button will have elavation. Note: You can only use the `raised={true}` property on filled buttons.
loading	boolean	false	If `true`, the button will have a loading indicator.
onClick	function	-	Callback fired when the button is clicked. Signature: `function(event: React.MouseEvent) => void`
size	"large" \| "medium" \| "small"	"medium"	The size of the button.
color	"default" \| "primary" \| "secondary"	"default"	The color of the button.
variant	"filled" \| "outlined" \| "inlined"	"filled"	The variant of the button.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

The properties that are only available to normal buttons.

Button Specific Properties
Name	Type	Default	Description
label (required)	string	-	The content of the button.
leadingIcon	node	-	The leading icon element placed before the label.
trailingIcon	node	-	The trailing icon element placed before the label.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

The properties that are only available to icon-buttons.

IconButton Specific Properties
Name	Type	Default	Description
icon (required)	node	-	The icon element.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.