How to have custom button styling?

[maybebansky]

I need to change the styling of a button outside of the variants that come with the design system. Is this supported?

I can style a box with this:

<Box p={20} bg="accent.emphasis">
  Accent
</Box>

However the bg prop isn't valid on a Button:

<Button bg="accent.emphasis">Em Button</Button>

Ive tired using a CSS-in-JS library:

import styled from "@emotion/styled";
import { Button } from "@primer/react";

const ButtonStyled = styled(Button)`
  background: red;
  &:hover {
    background: blue;
  }
`;

function MyBtn(props){
  const { text, ...atr } = props;
  return <ButtonStyled {...atr}>{text}</Button>
}

The background color is applied, however the hover style isn't as the default styles have a greater specificity:

// my style
.css-op0hcn:hover {
    background: blue;
}

// default styles:
.UhJmA:hover:not([disabled]):not([data-inactive]) {
    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #f3f4f6));
}

[TylerJDev]

Hi @maybebansky! You can definitely change the styles outside of the ones that are provided by default.

Currently, you can utilize the sx prop to add onto the styles of the component. This allows you to customize the component outside of what Primer provides directly. For example, if I wanted to change the background color and hover via this prop, I'd do something like:

  <Button
    variant="primary"
    sx={{
      '&:hover:not([disabled])': {
        backgroundColor: specified_color_here, // Replace "specified_color_here" with the color you'd want
      },
      backgroundColor: 'accent.emphasis',
    }}
  >
    Primary
  </Button>

This should then apply the background color to both the button in its default state, as well as when it is being hovered over. Let me know if you have any other questions!

[maybebansky]

@TylerJDev thanks for clarifying makes sense 👍

Just out of interest do you know why the bg prop isn't supported but custom CSS is?

Separate but maybe related, I noticed gap as a property doesn't work (without any typescript error) but when applied in sx does work:

<Box
    display="flex"
    gap={"10px"} // doesnt work
    sx={{ gap: "10px" }} // does work
    >

Thanks

[TylerJDev]

We tend to utilize the sx prop to pass in custom CSS instead of prop-specific CSS properties. We have a bit more information on sx usage in our docs. The goal is to utilize the least amount of custom CSS possible, so that we're mainly relying on the CSS that Primer ships out of the box, as this allows us to maintain consistency and accessibility of the components.

This means that for all custom CSS (at least for now), with Box, it should be applied via sx unless stated otherwise in the component's documentation (e.g. https://primer.style/components/box/react/beta#box, sx usage in the prop table). This also allows us to keep the props that are allowed to be mostly specific to that component and any CSS related properties kept in the sx prop.