The accented button is the main button set for your UI. It is typically used for the core actions in your workflow. Three different appearances are available based on the prominence required for the actions.

In the Salt Next theme, the accented button adopts a blue or teal styling option.

The neutral button is ideal for routine, non-urgent actions or tasks that require less visual prominence on the page. The neutral solid button can also be used as an alternative to the accented bordered button for secondary actions that need to stand out more.

Button has three other sentiments available—positive, caution and negative. Use them in your application designs as follows:

• Positive: Indicates actions that result in positive outcomes.
• Caution: Alerts users to potential consequences that may arise from taking an action.
• Negative: Indicates actions that lead to negative outcomes.

Button can display both an icon and text to visually reinforce the meaning of the action. Position the icon on either the left or right of the text depending on its purpose.

• Left of the Text: Place an icon to the left of the text to further describe the action, such as “upload”, “print”, or “share”. This additional description can make it easier for users to identify actions.
• Right of the Text: Place an icon to the right of the text to suggest direction or movement, such as opening a menu overlay, expanding a panel, or exporting a document. When the user activates the button, there's typically an immediate visual change.

Use an icon-only button without text when screen space is limited, and the icon is easily understood by users.

• Self-Explanatory Icons: An icon-only button should use well-known symbols that are self-explanatory. If the icon's purpose isn't clear on its own, include a text description.
• Tooltips: Add a Tooltip to an icon-only button to describe the action, such as “Edit this form”, “Print this document”, or “Lock document state”.

Use the disabled state for a button that the user can’t press.

A button with the prop disabled={true} will suppress all functionality.

If a disabled element can be enabled (either by the user or by the system), it should be focusable. To allow this, you can pass focusableWhenDisabled={true}.

This is useful when you want to show a tooltip or a popover when the user interacts with the button.

Use full width buttons on mobile devices or smaller viewports, the button will take up the full width of its container.

The previous call-to-action (CTA), Primary, and Secondary buttons have been seamlessly transitioned to their corresponding buttons in the new set. This ensures that you can continue your design work without interruption, while also benefiting from the new options available.

• CTA: sentiment="accented" appearance="solid"
• Primary: sentiment="neutral" appearance="solid"
• Secondary: sentiment="neutral" appearance="transparent"

The accented button is the main button set for your UI. It is typically used for the core actions in your workflow. Three different appearances are available based on the prominence required for the actions.

In the Salt Next theme, the accented button adopts a blue or teal styling option.

The neutral button is ideal for routine, non-urgent actions or tasks that require less visual prominence on the page. The neutral solid button can also be used as an alternative to the accented bordered button for secondary actions that need to stand out more.

Button has three other sentiments available—positive, caution and negative. Use them in your application designs as follows:

• Positive: Indicates actions that result in positive outcomes.
• Caution: Alerts users to potential consequences that may arise from taking an action.
• Negative: Indicates actions that lead to negative outcomes.

Button can display both an icon and text to visually reinforce the meaning of the action. Position the icon on either the left or right of the text depending on its purpose.

• Left of the Text: Place an icon to the left of the text to further describe the action, such as “upload”, “print”, or “share”. This additional description can make it easier for users to identify actions.
• Right of the Text: Place an icon to the right of the text to suggest direction or movement, such as opening a menu overlay, expanding a panel, or exporting a document. When the user activates the button, there's typically an immediate visual change.

Use an icon-only button without text when screen space is limited, and the icon is easily understood by users.

• Self-Explanatory Icons: An icon-only button should use well-known symbols that are self-explanatory. If the icon's purpose isn't clear on its own, include a text description.
• Tooltips: Add a Tooltip to an icon-only button to describe the action, such as “Edit this form”, “Print this document”, or “Lock document state”.

Use the disabled state for a button that the user can’t press.

A button with the prop disabled={true} will suppress all functionality.

If a disabled element can be enabled (either by the user or by the system), it should be focusable. To allow this, you can pass focusableWhenDisabled={true}.

This is useful when you want to show a tooltip or a popover when the user interacts with the button.

Use full width buttons on mobile devices or smaller viewports, the button will take up the full width of its container.

The previous call-to-action (CTA), Primary, and Secondary buttons have been seamlessly transitioned to their corresponding buttons in the new set. This ensures that you can continue your design work without interruption, while also benefiting from the new options available.

• CTA: sentiment="accented" appearance="solid"
• Primary: sentiment="neutral" appearance="solid"
• Secondary: sentiment="neutral" appearance="transparent"

The accented button is the main button set for your UI. It is typically used for the core actions in your workflow. Three different appearances are available based on the prominence required for the actions.

In the Salt Next theme, the accented button adopts a blue or teal styling option.

The neutral button is ideal for routine, non-urgent actions or tasks that require less visual prominence on the page. The neutral solid button can also be used as an alternative to the accented bordered button for secondary actions that need to stand out more.

Button has three other sentiments available—positive, caution and negative. Use them in your application designs as follows:

• Positive: Indicates actions that result in positive outcomes.
• Caution: Alerts users to potential consequences that may arise from taking an action.
• Negative: Indicates actions that lead to negative outcomes.

Button can display both an icon and text to visually reinforce the meaning of the action. Position the icon on either the left or right of the text depending on its purpose.

• Left of the Text: Place an icon to the left of the text to further describe the action, such as “upload”, “print”, or “share”. This additional description can make it easier for users to identify actions.
• Right of the Text: Place an icon to the right of the text to suggest direction or movement, such as opening a menu overlay, expanding a panel, or exporting a document. When the user activates the button, there's typically an immediate visual change.

Use an icon-only button without text when screen space is limited, and the icon is easily understood by users.

• Self-Explanatory Icons: An icon-only button should use well-known symbols that are self-explanatory. If the icon's purpose isn't clear on its own, include a text description.
• Tooltips: Add a Tooltip to an icon-only button to describe the action, such as “Edit this form”, “Print this document”, or “Lock document state”.

Use the disabled state for a button that the user can’t press.

A button with the prop disabled={true} will suppress all functionality.

If a disabled element can be enabled (either by the user or by the system), it should be focusable. To allow this, you can pass focusableWhenDisabled={true}.

This is useful when you want to show a tooltip or a popover when the user interacts with the button.

Use full width buttons on mobile devices or smaller viewports, the button will take up the full width of its container.

The previous call-to-action (CTA), Primary, and Secondary buttons have been seamlessly transitioned to their corresponding buttons in the new set. This ensures that you can continue your design work without interruption, while also benefiting from the new options available.

• CTA: sentiment="accented" appearance="solid"
• Primary: sentiment="neutral" appearance="solid"
• Secondary: sentiment="neutral" appearance="transparent"