cem-icon-button embeds cem-icon inside a native button or link and applies CEM action-theme states, including selected, pending, disabled and keyboard focus. Use href for navigation; cem-action shares the variant, state, bend and native form APIs, while cem-menu-item supplies menu commands.
Hover each enabled control, hold a pointer press, and use Tab for keyboard focus. States below are real component attributes. The five theme rows stay fixed so you can compare the same states side by side.
Disabled, selected, selectable and hidden use presence. Pending uses true or false. The containing application owns selection; clicks record activation without changing selected.
Use href for navigation, image for a Unicode glyph, emoji, image URL, Font Awesome classes or Material icon name, and direction for row or column layout. Variant selects the same action intent in both modes. Font icons require their provider stylesheet.
Public attributes and slots
label
disabled
selected
selectable
pending
hidden
class
href
image
size
aria-label
direction
align
name
value
form
formaction
formmethod
formenctype
formtarget
formnovalidate
type
aria-current
aria-expanded
aria-controls
variant
Slots: The default slot is passed into cem-icon, replacing its visible label fallback. It names links when label and aria-label are absent; use aria-label for icon-only controls.