material-you-react/app/components/icon-buttons.tsx

'use client';

import React from 'react';
import { IconButton } from '../../src/primitive-components/components';

function IconButtons() {
    return (
        <div
            style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <h1> Icon buttons </h1>
            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
                <div>
                    <h2> Default buttons </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '0.5em',
                        }}
                    >
                        <IconButton centralRipple icon={'settings'} />
                        <IconButton icon={'settings'} variant={'filled'} />
                        <IconButton icon={'settings'} variant={'tonal'} />
                        <IconButton icon={'settings'} variant={'outlined'} />
                    </div>
                    <h2> Disabled default buttons </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '0.5em',
                        }}
                    >
                        <IconButton disabled icon={'settings'} />
                        <IconButton
                            disabled
                            icon={'settings'}
                            variant={'filled'}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            variant={'tonal'}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            variant={'outlined'}
                        />
                    </div>
                </div>
                <div>
                    <h2> Toggle buttons </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '0.5em',
                        }}
                    >
                        <IconButton
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                        />
                        <IconButton
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'filled'}
                        />
                        <IconButton
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'tonal'}
                        />
                        <IconButton
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'outlined'}
                        />
                    </div>
                    <h2> Disabled toggle buttons </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '0.5em',
                        }}
                    >
                        <IconButton
                            disabled
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'filled'}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'tonal'}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'outlined'}
                        />
                    </div>
                    <h2> Disabled selected toggle buttons </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '0.5em',
                        }}
                    >
                        <IconButton
                            disabled
                            icon={'settings'}
                            selected
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            selected
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'filled'}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            selected
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'tonal'}
                        />
                        <IconButton
                            disabled
                            icon={'settings'}
                            selected
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
                            variant={'outlined'}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}

export default IconButtons;