2.5.5 — Target Size (Enhanced)

xml

<!-- Ensure target has sufficient width and height or sufficient spacing -->
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="24dp"
    android:minHeight="24dp"
    android:layout_marginBottom="24dp"
    android:src="@drawable/ic_code"
    android:contentDescription="Appt" />

kotlin

IconButton(
  onClick = {
    // Action
  },
  modifier = Modifier
    .widthIn(min = 24.dp)    // Minimum 24 dp width
    .heightIn(min = 24.dp)   // Minimum 24 dp height
    .padding(bottom = 24.dp) // Set 24 dp spacing
) {
  // Icon inside will be properly sized
  Icon(
    imageVector = Icons.Default.Code,
    contentDescription = "Appt"
  )
}

swift

import UIKit

class IconButton: UIButton {
    
    convenience init(systemImageName: String, accessibilityLabel: String) {
        self.init(type: .system)
        
        let image = UIImage(systemName: systemImageName)
        self.setImage(image, for: .normal)
        self.accessibilityLabel = accessibilityLabel

        // Apply 24 points spacing
        self.contentEdgeInsets = UIEdgeInsets(
            top: 12,
            left: 12,
            bottom: 12,
            right: 12
        )

        // Apply minimum 24 points width and 24 points height
        self.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.widthAnchor.constraint(greaterThanOrEqualToConstant: 24),
            self.heightAnchor.constraint(greaterThanOrEqualToConstant: 24)
        ])
    }
}

swift

Button(action: {
  // Action
}) {
  Image(systemName: "code")
}
.accessibilityLabel("Appt")
.frame(minWidth: 24, minHeight: 24) // Minimum 24 points width/height
.padding(.bottom, 24) // Set 24 points spacing

dart

IconButton(
  icon: Icon(Icons.code),
  onPressed: () {
    // Action
  },
  constraints: BoxConstraints(
    minWidth: 24.0,  // Minimum 24 points width
    minHeight: 24.0, // Minimum 24 points height
  ),
  padding: EdgeInsets.only(bottom: 24.0), // Set 24 points spacing
  tooltip: 'Appt',
)

jsx

const IconButton = ({ onPress }) => {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={onPress}
    >
      <MaterialIcons name="code" size={24} color="#000" />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    minWidth: 24,     // Minimum 24 points width 
    minHeight: 24,    // Minimum 24 points width
    marginBottom: 24, // Set 24 points spacing
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default IconButton;

csharp

public partial class IconButton : ContentView
{
  public IconButton()
  {
    MinimumWidthRequest = 24;  // Minimum 24 points width
    MinimumHeightRequest = 24; // Minimum 24 points height
    Margin = new Thickness(0, 0, 0, 24); // Set 24 points spacing
  }
}

csharp

public partial class IconButton : ContentView
{
  public IconButton()
  {
    MinimumWidthRequest = 24;  // Minimum 24 points width
    MinimumHeightRequest = 24; // Minimum 24 points height
    Margin = new Thickness(0, 0, 0, 24); // Set 24 points spacing
  }
}