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
value="a"
onDismiss={(value) => {
alert(`dismiss ${value}`)
}}
>
Press the trigger to dismiss this ->
<Dismissible.Trigger aria-label="Dismiss 'a'" />
</Dismissible>
<Dismissible
value="custom"
onDismiss={(value) => {
alert(`dismiss ${value}`)
}}
asChild
>
<Box
css={{
width: '100%',
fontFamily: 'system-ui',
border: '1px solid',
borderRadius: 4,
display: 'flex',
justifyContent: 'space-between',
padding: 8
}}
>
Basic custom implementation example
<Dismissible.Trigger asChild>
<button type="button">Custom Dismiss Trigger</button>
</Dismissible.Trigger>
</Box>
</Dismissible>

API Reference

DismissibleRoot

PropTypeDefaultRequired
asChild
boolean

-

value
string | number

-

onDismiss
(value: ReactText) => void

-

-

disabled
boolean

-

Dismissible.Trigger

PropTypeDefaultRequired
asChild
boolean

-