Dismiss
Close control — an X knocked out of a filled circle, at md (24) or sm (20), on default or inverse surfaces.
dismissOpen in Figma ↗An icon button for closing or dismissing a card, sheet, modal, or overlay.
Use for: Placement in the top corner of dismissible components — cards, bottom sheets, modals, and banners — where the user needs a tap target to close or remove the element.
Not for: Inline actions or destructive delete. Use a text button or icon button from the action set instead.
Choosing: Use surface=default on light surfaces. Use surface=inverse on dark or glass surfaces. Use small=true in compact components where a 24px target would crowd the layout.
Rules: Do not use dismiss as a navigation back control — it signals closing, not going back. Always pair with an accessible label in implementation.
import SwiftUI import EandTokens // dismiss: a TRANSPARENT 24pt box (sm 20) with 2pt padding, holding the icon-set // dismiss-filled glyph at 20pt (sm 16) in color/dismiss/{default,inverse}. The X is // knocked out, so the surface shows through — it is not drawn white. struct Dismiss: View { var inverse = false var small = false var action: () -> Void var body: some View { Button(action: action) { Image(systemName: "xmark.circle.fill") // same geometry as dismiss-filled .resizable() .foregroundStyle(inverse ? EandColor.dismissInverse : EandColor.dismissDefault) .frame(width: small ? EandIcon.md : EandIcon.lg, height: small ? EandIcon.md : EandIcon.lg) .padding(EandSpacing.spacing2xs) } .accessibilityLabel("Dismiss") } }
When to use
- Use to close or remove something in place: a sheet, a banner, a tooltip. The library uses it for the removable Chip and for clearing an Input.
- Use
surface="inverse"on dark surfaces. - Don't use for back navigation — that belongs to the TopBar.
The accessible name defaults to “Dismiss”. Pass aria-label when the context needs a more
specific one, such as “Remove filter”.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onClick? | (() => void) | — | |
size? | 'md' | 'sm' | md | md = 24 (icon-size xl), sm = 20 (icon-size lg) — Figma small. |
surface? | 'default' | 'inverse' | default |
Design
Figma source: dismiss — etisalat Consumer App DSL V1.2
md: a transparent 24px box (icon/xl) with a 2px inset (spacing/2xs) holding a 20pxdismiss-filledglyph.sm(Figmasmall): a 20px box with a 16px glyph.- Ink
color/dismiss/defaultorcolor/dismiss/inverse. The X is knocked out, so the surface shows through; it is not white. - Figma still instances a legacy local close icon of the same geometry; the code uses the
icon set's
dismiss-filled.