You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-`state` (string) — Visual state of the alert. Common values: `neutral`, `info`, `success`, `warning`, `danger`, `custom`, `cogear`. Default: `neutral`.
44
-
-`variant` (string) — Visual variant: `inline`, `toast`, or `alternate`.
45
-
-`dismissable` (boolean) — When true, a close control is shown and the alert will emit a close event when dismissed.
46
-
47
-
> See `elements/pf-alert/pf-alert.ts` for exact property types, defaults, and any additional options.
48
-
49
-
### Slots
50
-
-`header` — Slot for the heading (typically an `<h3>`).
51
-
- default (unnamed) — Main body/content of the alert.
52
-
-`actions` — Buttons or links for user actions (e.g. `<pf-button slot="actions">`).
53
-
54
-
### Events
55
-
-`close` (AlertCloseEvent) — Fired when the alert is closed (either via UI or programmatically). The event contains the action (e.g. `'close'`, `'dismiss'`, or `'confirm'`). Check the component source for exact payload.
56
-
57
-
### Methods
58
-
-`static toast(options)` — Static helper to show a toast notification. Options typically include `message`, `heading`, `state`, `persistent`, and `actions`.
59
-
60
-
## Styling
61
-
62
-
The component exposes CSS parts and custom properties for styling. Typical part(s): `::part(container)` for the main container. See the component stylesheet (`pf-alert.css`) for a list of CSS custom properties (colors, spacing, durations) you can override.
63
-
64
-
## Accessibility
65
-
66
-
- Toasts use `role="status"` and `aria-live="polite"` to announce messages to assistive technologies. Inline alerts should be used in-context with appropriate semantic markup.
67
-
68
-
## Notes & tips
69
-
70
-
- Use the `actions` slot to add interactive elements and listen for their events on the page.
71
-
- For persistent toasts set the `persistent` option when calling `PfAlert.toast(...)`.
72
-
- If you need the exact event names/shape or CSS variables, I can extract and add them from the component source.
73
-
74
-
---
75
-
If you want, I can also:
76
-
- Add a short section listing every CSS custom property the component exposes.
77
-
- Add a copyable example showing how to listen for the alert `close` event.
78
-
- Add a brief section demonstrating integration in React or Angular.
0 commit comments