モケラ

Tech Sheets

mokelab

MUI の Button Group コンポーネント

最終更新日:2024-08-08

MUI の Button Groupコンポーネントは、複数のボタンを一つのグループとしてまとめることができます。見た目を統一するのに役立ちます。

公式ドキュメント:Button Group

基本的な使い方

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup'; // `@mui/material` からインポートします

export default function BasicButtonGroup() {
  return (
    <ButtonGroup> // タグを記述して使用します。
      <Button>One</Button> // タグ内に、配置したい<Button>コンポーネントを記述します。
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

一覧に戻る