Loading navigation…
User
Accessibility
IconButton from @prepared911/ui-core renders a native <button> with an icon and a title that doubles as the accessible name and the hover/long-press tooltip. The component does the native button wiring; your job is to write a descriptive title for every instance and keep pressed / controlled state honest.
<button> with all expected keyboard and screen-reader behavior.title. The title prop renders as the hover tooltip and as the accessible name so screen readers and sighted users get the same meaning.disabled attribute.title for every icon button. Required; it is the accessible name. Name the outcome ("Delete incident", not "Delete"). Include the target in dense contexts.title to describe the next action ("Unmute audio" when muted; "Mute audio" when unmuted) and expose aria-pressed.aria-controls / aria-expanded when the button opens or toggles another region (menu, panel).ButtonType.Destructive styling communicates intent visually; pair with a Modal confirmation for irreversible work.<button>.aria-pressed for toggles; aria-expanded + aria-controls for disclosure triggers.aria-label may override title when the two must differ (rare—prefer identical strings).Standard size meets touch-target minimums. When using the small variant in dense toolbars, keep gap spacing around each button so touch users can target accurately.
title via template ("Delete incident {id}").title is the accessible name; it reaches screen readers independent of the tooltip visually appearing.