material-you-react/app/components/fabs.tsx

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

export default function Fabs() {
    return (
        <div className={'m3 m3-wrapper'}>
            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
                <div>
                    <h1> FABs with elevation</h1>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            width: '100%',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <h2> Small </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB
                                    centralRipple
                                    elevated
                                    icon={'edit'}
                                    size={'small'}
                                />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'small'}
                                    variant={'primary'}
                                />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'small'}
                                    variant={'secondary'}
                                />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'small'}
                                    variant={'tertiary'}
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Default </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB elevated icon={'edit'} />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    variant={'primary'}
                                />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    variant={'secondary'}
                                />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    variant={'tertiary'}
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Large </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB elevated icon={'edit'} size={'large'} />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'large'}
                                    variant={'primary'}
                                />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'large'}
                                    variant={'secondary'}
                                />
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'large'}
                                    variant={'tertiary'}
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Extended </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB elevated icon={'edit'} size={'extended'}>
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'extended'}
                                    variant={'primary'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'extended'}
                                    variant={'secondary'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
                                    elevated
                                    icon={'edit'}
                                    size={'extended'}
                                    variant={'tertiary'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h1> FABs without elevation</h1>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            width: '100%',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <h2> Small </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB icon={'edit'} size={'small'} />
                                <FAB
                                    icon={'edit'}
                                    size={'small'}
                                    variant={'primary'}
                                />
                                <FAB
                                    icon={'edit'}
                                    size={'small'}
                                    variant={'secondary'}
                                />
                                <FAB
                                    icon={'edit'}
                                    size={'small'}
                                    variant={'tertiary'}
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Default </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB icon={'edit'} />
                                <FAB icon={'edit'} variant={'primary'} />
                                <FAB icon={'edit'} variant={'secondary'} />
                                <FAB icon={'edit'} variant={'tertiary'} />
                            </div>
                        </div>
                        <div>
                            <h2> Large </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB icon={'edit'} size={'large'} />
                                <FAB
                                    icon={'edit'}
                                    size={'large'}
                                    variant={'primary'}
                                />
                                <FAB
                                    icon={'edit'}
                                    size={'large'}
                                    variant={'secondary'}
                                />
                                <FAB
                                    icon={'edit'}
                                    size={'large'}
                                    variant={'tertiary'}
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Extended </h2>
                            <div style={{ display: 'flex', gap: '2em' }}>
                                <FAB icon={'edit'} size={'extended'}>
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
                                    icon={'edit'}
                                    size={'extended'}
                                    variant={'primary'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
                                    icon={'edit'}
                                    size={'extended'}
                                    variant={'secondary'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
                                    icon={'edit'}
                                    size={'extended'}
                                    variant={'tertiary'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}