Modal

<Modal
    open
    focusTrapOptions={{ disabled: true }}
    onClose={() => alert("closing")}
    title="Grand Moff Tarkin"
    footer={<Button primary>Close</Button>}
    portal={false}
>
    Don't worry, we'll deal with your rebel friends soon enough!
</Modal>

<State initial={{
    open: false
}}>
    {([state, setState]) => (
        <div>
            <ButtonGroup>
                {[Modal.Sizes.XS, Modal.Sizes.S, Modal.Sizes.M, Modal.Sizes.L].map((width, index) => (
                    <Button
                        key={index}
                        onClick={() => setState({ modalWidth: width, open: true })}
                    >
                        <span className="tt-uppercase m-r-half">{width}</span> Modal
                    </Button>
                ))}
            </ButtonGroup>
            <Modal
                open={state.open}
                size={state.modalWidth}
                onClose={() => setState({open: false})}
                title={`${state.modalWidth} Modal`}
                footer={<Button primary onClick={() => setState({open: false})}>Close</Button>}
            >
                Don't worry, we'll deal with your rebel friends soon enough!
            </Modal>
        </div>
    )}
</State>