---
# System prepended metadata

title: Button remaining work

---

# Button remaining work

## CSS issue: High contrast seletors

v0 provides high contrast theme.
v7 uses high constrast selectors.

Partners are saying we need the selectors. I'd love to avoid it if possible, but we may have to bring them back.

Is there a way to detect high contrast theme, so that we can provide guidance to customers on how to support high contrast?

## `styles` prop replacement guidance

Was:
```tsx
<PrimaryButton styles={ styleFunction } />
```

Now (idea, proposal):

```tsx
const MyButton = compose(Button, {
  useHooks: [
    makeStyles(styleFunction, [deps])
  ]
}
});
```

## Need guidance on providing themed Buttons using tokens

```tsx
const MyButton = compose(Button, {
  useHooks: [
    makeButtonVariants({
      var1: {...tokens},
      var2: {...tokens}
    })
  ]
}
});
```

## `ThemeProvider` can provide old/new theme 

Old:

```tsx
const theme = {
  palette: {
    themePrimary: 'red'
  }
};

<Customizer settings={{ theme }}>
  <PrimaryButton>Hello</PrimaryButton>
</Customizer>
```

New: 

```tsx

```

# `accessibility` behaviors from v0

PR out using the behaviors

## API surface parity with v0 and v8 Button

### Shorthand differences

* `content` slot vs `children`
* Passing in props to a slot
* children function parity/issues
* static access to slots

Is this allowed?
```tsx
<Button>
  <Button.icon>
    <AddIcon/>
  </Button.icon>
</Button>
```

...but what about passing in icon? This seems redundant.

```tsx
<Button icon={<SubtractIcon/>}>
  <Button.icon>
    <AddIcon/>
  </Button.icon>
</Button>
```