Dismissible

An element with a dismiss button which removes it from the view

Dismissible itself is a primitive. It has not been designed so it should not be used out-of-the-box as a user facing component. Test the component is accessible depending on each implementation use case.

<Dismissible
onDismiss={() => {
  alert(`dismiss a`)
}}
>
Press the trigger to dismiss this ->
<Dismissible.Trigger aria-label="Dismiss 'a'" />
</Dismissible>

<Dismissible
onDismiss={() => {
  alert(`dismiss custom`)
}}
asChild
>
<div
  className={clsx('w-full', '[font-family:system-ui]', 'border',  'rounded-[4]', 'flex', 'justify-between', 'p-2')}
>
  Basic custom implementation example
  <Dismissible.Trigger asChild>
    <button type="button">Custom Dismiss Trigger</button>
  </Dismissible.Trigger>
</div>
</Dismissible>

API Reference

Dismissible

Prop	Type	Default	Required

Dismissible.Trigger

Prop	Type	Default	Required
`asChild`	`boolean`		-