Item Action

Used to render multiple items with some information, an icon and actions for each of them.

Mainly used in settings pages to render the properties and the actions alongside.

<ItemAction>
  <img slot="icon" src="{icpLogo}" class="start" />
  <div class="content">
    <p>Unlocking</p>
    <p class="description">No age bonus</p>
  </div>
  <button slot="actions" class="secondary">
    One action
  </button>
</ItemAction>

Properties

Property	Description	Type	Default
`tagName`	The tagName of the parent element.	`"li"` or `"div"`	`"li"`
`testId`	Add a `data-tid` attribute to the DOM, useful for test purpose.	`string` or `undefined`	`undefined`

Slots

Slot name	Description
Default slot	The main content of the item.
`logo`	The logo of the item. Recommended to use 100% width and height.
`actions`	Slot to add the item actions.

Usage Recommendation

Square Icon

The icon should be square and take all the item height.

The item has a set height of the button height plus some padding. The icon slot is square of the whole item height and the same size for the width.

Therefore, the icon slot should take the whole width and height to be square.

Full Width Actions Mobile

In mobile, the actions are rendered below the content. It’s recommended that the buttons take the full width.

If it’s just on button, then stretch it or set the slot to the button. If it’s two buttons, make sure they cover the full width together.

Showcase

The component is within a div with background to highlight the component exactly as it is.

IMPORTANT: The component has no internal padding nor external margin. The spacing with the other components is responsibility of the parent using this component.

Showcase Logo as Div

Unlocking

No age bonus

Showcase Icon Inside UL

Unlocking

No age bonus

Pick a component