Skip to main content

Action Tile

A tappable tile with a circular icon, title, optional subtitle, and optional badge.

When to use it

Use an ActionTile to represent a navigable action, appointment, or task in a list — for example, an item in a settings menu or a scheduled event card.

Import

import 'package:catalyst_ui/catalyst_ui.dart';

Usage

ActionTile(
icon: const Icon(Icons.calendar_today),
iconBackgroundColor: const Color(0xFFEEF2FF),
title: const Text('Book appointment'),
onTap: _handleTap,
)

Parameters

ParameterTypeDefaultDescription
iconWidgetrequiredThe icon inside the circular background.
iconBackgroundColorColorrequiredThe background colour of the circular icon container.
titleWidgetrequiredThe primary label.
onTapVoidCallbackrequiredCalled when the tile is tapped.
subtitleWidget?nullAn optional secondary line below title.
trailingWidget?nullOptional widget to display at the end of the tile.
badgeBadge?nullAn optional Badge shown next to title.