# Modal

## Basic modal

```js
const [hide, setHide] = React.useState(true);
const [size, setSize] = React.useState('default');
const toggleOpen = () => setHide(!hide);
<>
  <SilkeButton label="Show modal" onClick={toggleOpen} />
  <SilkeModal hide={hide} title={ipsum.name(3)} onClose={toggleOpen} size={size}>
    <SilkeModalContent>{ipsum.p(2)}</SilkeModalContent>
  </SilkeModal>
</>;
```

## Modal sizes

```js
const [hide, setHide] = React.useState(true);
const [size, setSize] = React.useState('default');
const toggleOpen = () => setHide(!hide);
<>
  <SilkeButton label="Show modal" onClick={toggleOpen} />
  <SilkeModal hide={hide} title={`Modal size: ${size}`} onClose={toggleOpen} size={size}>
    <SilkeModalContent>{ipsum.p(2)}</SilkeModalContent>
    <SilkeButtonSet>
      <SilkeButton label="Small" onClick={() => setSize('small')} />
      <SilkeButton label="Default" onClick={() => setSize('default')} />
      <SilkeButton label="Large" onClick={() => setSize('large')} />
    </SilkeButtonSet>
  </SilkeModal>
</>;
```

## Modal with actions

```js
const [hide, setHide] = React.useState(true);
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState([]);
const toggleOpen = () => setHide(!hide);
<>
  <SilkeButton label="Show modal" onClick={toggleOpen} />
  <SilkeModal hide={hide} title={ipsum.name(3)} onClose={toggleOpen}>
    <SilkeModalContent>
      {ipsum.p(3)}
      <SilkeSelectField
        label="Default"
        name="Foobar"
        multiple
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeModalContent>
    <SilkeModalActions>
      <SilkeButton label="Close" kind="secondary" onClick={toggleOpen} />
      <SilkeButton label="Next" icon="arrow.right" onClick={toggleOpen} />
    </SilkeModalActions>
  </SilkeModal>
</>;
```

## Modal with too much content

```js
const [hide, setHide] = React.useState(true);
const toggleOpen = () => setHide(!hide);
<>
  <SilkeButton label="Show modal" onClick={toggleOpen} />
  <SilkeModal hide={hide} title={ipsum.name(10)} onClose={toggleOpen}>
    <SilkeModalContent>
      <SilkeImage src={ipsum.image(800)} aspectRatio="16:9" />
      <SilkeBox vPad gap vAlign="center">
        <SilkeImage src={ipsum.image()} avatar="large" />
        <SilkeBox column>
          <SilkeText color="neutral-80" kind="small">
            Written by
          </SilkeText>
          <SilkeText>{ipsum.name()}</SilkeText>
        </SilkeBox>
      </SilkeBox>
      {ipsum.p(20)}
    </SilkeModalContent>
    <SilkeModalActions>
      <SilkeButton label="Close" kind="secondary" onClick={toggleOpen} />
    </SilkeModalActions>
  </SilkeModal>
</>;
```

## Confirmation modal

```js
const [hide, setHide] = React.useState(true);
const [hideDelete, setHideDelete] = React.useState(true);
const handleToggle = () => setHide(!hide);
const handleToggleDelete = () => setHideDelete(!hideDelete);
<SilkeButtonSet>
  <SilkeButton label="Show default modal" onClick={handleToggle} />
  <SilkeButton label="Show delete modal" kind="danger" onClick={handleToggleDelete} />
  <SilkeConfirmationModal
    hide={hide}
    title={ipsum.name(3)}
    onConfirm={handleToggle}
    onClose={handleToggle}
    confirmLabel="Confirm"
  >
    Confirmation message goes here
  </SilkeConfirmationModal>
  <SilkeConfirmationModal
    hide={hideDelete}
    title={ipsum.name(3)}
    confirmLabel="Delete"
    confirmIcon="delete"
    confirmKind="danger"
    onConfirm={handleToggleDelete}
    onClose={handleToggleDelete}
  >
    Sure you want to delete this thing?
  </SilkeConfirmationModal>
</SilkeButtonSet>;
```

## Confirmation modal with safe word

```js
const [hide, setHide] = React.useState(true);
const handleToggle = () => setHide(!hide);

<SilkeButtonSet>
  <SilkeButton label="Show confirmation modal" onClick={handleToggle} />

  <SilkeConfirmationModal
    hide={hide}
    title={ipsum.name(3)}
    confirmLabel="Delete"
    confirmIcon="delete"
    confirmKind="danger"
    onConfirm={handleToggle}
    onClose={handleToggle}
    safeWord="flamingo"
  >
    Sure you want to delete this thing?
  </SilkeConfirmationModal>
</SilkeButtonSet>;
```

## Modal with custom padding

```js
const [hide, setHide] = React.useState(true);
const toggleOpen = () => setHide(!hide);
<>
  <SilkeButton label="Show modal" onClick={toggleOpen} />
  <SilkeModal hide={hide} title={ipsum.name(3)} onClose={toggleOpen} pad="none">
    <SilkeModalContent>
      <SilkeBox pad="l">{ipsum.p(1)}</SilkeBox>
      <SilkeDivider dark />
      <SilkeBox pad="l" hAlign="end" gap="m">
        <SilkeButton label="Back to login" kind="ghost" />
        <SilkeButton label="Continue to app" />
      </SilkeBox>
    </SilkeModalContent>
  </SilkeModal>
</>;
```