Default

<State initial={{ show: false }}>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>Show</Button>
      <Modal show={state.show} onClose={() => setState({ show: false })}>
        <Text variant="md">Some example content</Text>
      </Modal>
    </>
  )}
</State>

With title

<State initial={{ show: false }}>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>Show</Button>
      <Modal
        title="Modal Title"
        show={state.show}
        onClose={() => setState({ show: false })}
      >
        <Text variant="md">Some example content</Text>
      </Modal>
    </>
  )}
</State>

With logo

<State initial={{ show: false }}>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>Show</Button>
      <Modal
        title="Modal Title"
        hasLogo
        show={state.show}
        onClose={() => setState({ show: false })}
      >
        <Text variant="md">Some example content</Text>
      </Modal>
    </>
  )}
</State>

With fixed button

<State initial={{ show: false }}>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>Show</Button>
      <Modal
        title="Modal Title"
        show={state.show}
        onClose={() => setState({ show: false })}
        FixedButton={<Button width="100%">Click me</Button>}
      >
        <Text variant="md">Some example content</Text>
      </Modal>
    </>
  )}
</State>

Wide

<State initial={{ show: false }}>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>Show</Button>
      <Modal isWide show={state.show} onClose={() => setState({ show: false })}>
        <Text variant="md">Some example content</Text>
      </Modal>
    </>
  )}
</State>
On this page
Default
With title
With logo
With fixed button
Wide