# Slots Hacking

<Button icon={<CalendarIcon />}>Click Me</Button>
<Button body={{ className: 'foo' }} icon={<CalendarIcon />}>
    Click Me
</Button>


<Button icon={<CalendarIcon />}>
    {(state) => (
        <state.slots.root {...state.props.root}>
            <s.slots.children
                {...state.props.children}
                className={ax(state.props.children.className, 'foo')}
            >
                Click Me
            </s.slots.children>
        </state.slots.root>
    )}
</Button>

render => fn(mergeProps)

<Button icon={<CalendarIcon />}>
    {() => ({ className: 'foo'})}
</Button>


<div>
    <ButtonBody>Click Me</ButtonBody>
    // span
    // classes
</div>

const { slots, props } = state

return (
    <slots.root {...props.root}>
        <slots.icon {...props.icon} />
        <slots.children {...props.children}>
          {props.root.children}
        </slots.children>
        
        <slots.body {...props.body} />

    </slots.root>
)

state.slots.icon = 'span'
state.props.icon = { ...defaultSpanProps }
state.props.icon.children = <CalendarIcon />

state.slots.body = 'span'
state.props.body = { ...defaultSpanProps }
state.props.children.children = props.children // A hard override