search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.71k stars 261 forks source link

Use `Button` component instead of native `button` in `HeaderGlobalAction` #1893

Closed spburtsev closed 8 months ago

spburtsev commented 10 months ago

Currently, adding tooltips to the HeaderGlobalAction component is a bit cumbersome due to its reliance on the native button element. To improve this functionality, I propose using the Button component instead, as it natively supports tooltips and aligns with the approach taken in @carbon/react.

metonym commented 8 months ago

Released in v0.84.0.

Example in docs.

It's as simple as adding an iconDescription to complement the icon.

<HeaderGlobalAction
  iconDescription="Settings"
  icon={SettingsAdjust}
/>

Adjust the tooltip alignment using the tooltipAlignment prop. Default value is "center". Other values can be "start" or "end".

<HeaderGlobalAction
  iconDescription="Settings"
  icon={SettingsAdjust}
  tooltipAlignment="start"
/>