Filter Pill

Filter pills are used to filter content or selections.

Basic

A basic filter pill with a label.

FilterPill(
  label: Text('Filter'),
  onTap: () {},
)

Selected

A filter pill in a selected state.

FilterPill(
  label: Text('Selected'),
  isSelected: true,
  onTap: () {},
)

With Leading Icon

A filter pill with a leading icon.

FilterPill(
  label: Text('With Icon'),
  leading: Icon(PrimeIcons.viamFlutter, size: 16),
  onTap: () {},
)

Icon Label

A filter pill with an icon as the label.

FilterPill(
  label: Icon(PrimeIcons.magnify, size: 20),
  onTap: () {},
)

Single Selection

Example of managing single selection state.

// Helper stateful widget for implementation details
class SingleSelectionExample extends StatefulWidget {
  @override
  State<SingleSelectionExample> createState() => _SingleSelectionExampleState();
}

class _SingleSelectionExampleState extends State<SingleSelectionExample> {
  String _selectedFilter = 'All';

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        FilterPill(
          label: Text('All'),
          isSelected: _selectedFilter == 'All',
          onTap: () => setState(() => _selectedFilter = 'All')
        ),
        FilterPill(
          label: Text('Error'),
          color: theme.colorScheme.statusDangerDark,
          isSelected: _selectedFilter == 'Error',
          onTap: () => setState(() => _selectedFilter = 'Error'),
        ),
        FilterPill(
          label: Icon(PrimeIcons.magnify),
          color: theme.colorScheme.statusInfoDark,
          isSelected: _selectedFilter == 'Search',
          onTap: () => setState(() => _selectedFilter = 'Search'),
        ),
        // ... more items
      ],
    );
  }
}

Multi Selection

Example of managing multiple selection state (tags).

// Helper stateful widget for implementation details
class MultiSelectionExample extends StatefulWidget {
  @override
  State<MultiSelectionExample> createState() => _MultiSelectionExampleState();
}

class _MultiSelectionExampleState extends State<MultiSelectionExample> {
  final Set<String> _selectedTags = {'Error', 'Warning'};

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        FilterPill(
          label: Text('Error'),
          color: theme.colorScheme.statusDangerDark,
          isSelected: _selectedTags.contains('Error'),
          onTap: () => setState(() =>
            _selectedTags.contains('Error')
              ? _selectedTags.remove('Error')
              : _selectedTags.add('Error')
          ),
        ),
        // ... more items
      ],
    );
  }
}