Ionic ships with a rich set of pre-styled components that adapt to iOS and Android automatically.

Buttons 

  import { IonButton } from '@ionic/react';

<IonButton>Default</IonButton>
<IonButton color="primary">Primary</IonButton>
<IonButton fill="outline">Outline</IonButton>
<IonButton expand="block">Full Width</IonButton>
<IonButton disabled={true}>Disabled</IonButton>

Lists

Lists are the backbone of mobile UIs:

  import { IonList, IonItem, IonLabel, IonAvatar } from '@ionic/react';

<IonList>
    <IonItem>
        <IonAvatar slot="start">
            <img src="/avatar.png" alt="User" />
        </IonAvatar>
        <IonLabel>
            <h2>Jane Doe</h2>
            <p>[email protected]</p>
        </IonLabel>
    </IonItem>
    <IonItem button detail={true}>
        <IonLabel>Settings</IonLabel>
    </IonItem>
</IonList>

Cards 

  import { IonCard, IonCardHeader, IonCardTitle, IonCardContent } from '@ionic/react';

<IonCard>
    <IonCardHeader>
        <IonCardTitle>Card Title</IonCardTitle>
    </IonCardHeader>
    <IonCardContent>
        Cards group related content in a contained, elevated surface.
    </IonCardContent>
</IonCard>

Icons

Ionic uses Ionicons:

  import { IonIcon } from '@ionic/react';
import { heart, shareSocial } from 'ionicons/icons';

<IonIcon icon={heart} color="danger" />
<IonIcon icon={shareSocial} size="large" />

Modals and Alerts 

  import { IonButton, useIonAlert } from '@ionic/react';

function MyComponent() {
    const [presentAlert] = useIonAlert();

    return (
        <IonButton
            onClick={() =>
                presentAlert({
                    header: 'Confirm',
                    message: 'Are you sure?',
                    buttons: ['Cancel', 'OK'],
                })
            }
        >
            Show Alert
        </IonButton>
    );
}

Platform Adaptation

Components automatically match iOS or Android styling. Preview both with:

  ionic serve --lab

Use the mode prop to force a platform style: <IonButton mode="ios">.

Next: wire pages together with navigation and routing.