A padded row for a consumer-provided control with optional leading and trailing content.
Usage
Item adds standard row spacing, product typography, and visual states around a consumer-provided control. It renders a div and does not accept an as prop. React children are render functions; Ember's default block yields the same className, contentClassName, and labelClassName values for the control, its content, and its label.
Use elementBefore and elementAfter in React, or Ember named blocks or component-valued @elementBefore and @elementAfter args, for content beside the control. These slots are independent of the control and can contain their own actions.
Appearance
isInteractive, isDisabled, isSelected, isActive, and isCritical control visual states and default to false. isSelected changes text weight without changing its size. textVariant accepts ItemTextVariant and defaults to product-p.
These props do not add roles, ARIA state, event handlers, or disabled behavior to the control. Apply those to the control and its owning pattern as needed. Use PlainItem when you need the same slots with zero padding and gap.
Item uses 8px block and inline padding and an 8px gap. Override these values with PlumaItem.vars.paddingBlock, PlumaItem.vars.paddingInline, PlumaItem.vars.paddingInlineStart, PlumaItem.vars.paddingInlineEnd, and PlumaItem.vars.gap from @customerio/pluma-components/css/components.