"unstyled" option for Button?

[benkeen]

A common use-case we're facing is that we want to use FUI9's Button component, but without any styling whatsoever. We want it to be clickable and otherwise behave like a button, e.g. be interoperable with Fluent tooltip/MenuTrigger and get the focus outline for a11y purposes. The transparent appearance option still adds padding and hover states.

What we've done locally is override the styling for what we need, but I wonder if this is a common enough use-case that adding a unstyled appearance option would be more broadly useful?

[pradeept95]

Hi @benkeen ,

If you want completely un-styled appearance, you can use makeResetStyles and set all to unset

const useButtonStyles = makeResetStyles({
  all: 'unset',
});

export const UnstyledButton = () => {
  const styles = useButtonStyles();
  return <Button className={styles}>Example</Button>;
};

Here is the link: https://stackblitz.com/edit/teacqf?file=src%2Fexample.tsx

Thank you.

[spmonahan]

You can re-compose the existing Button to omit styles. Example: https://stackblitz.com/edit/zfmtrk?file=src%2Fexample.tsx

Here's the standard implementation for comparison: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-button/library/src/components/Button/Button.tsx

---

The advantage of re-composing in this case that rather than override the styles, you just don't ever add them in the first place.