Button Group

Button group that perform related actions or belong to the same category. This helps users quickly understand their purpose and reduces cognitive load.

Basic

The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children.

Source Code

import {
  FileDownloadOutline,
  FilePlusOutline,
  FileRemoveOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { Button, ButtonGroup } from '@ocean-network-express/magenta-ui/react';

export function Basic() {
  return (
    <ButtonGroup>
      <Button leftIcon={<FilePlusOutline />}>Start</Button>
      <Button leftIcon={<FileDownloadOutline />}>Middle</Button>

Source Code

import {
  FileCsvOutline,
  FileDownloadOutline,
  FilePlusOutline,
  FilePngOutline,
  FileRemoveOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { ButtonGroup, IconButton } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function BasicIcons() {
  return (

Variants

Default variant is outline.

Source Code

import { Button, ButtonGroup } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Variant() {
  return (
    <ButtonGroup>
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
      <Button>Four</Button>
    </ButtonGroup>
  );

Sizes

Button supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
Default size is lg.

Source Code

import {
  FileDownloadOutline,
  FilePlusOutline,
  FileRemoveOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { Button, ButtonGroup } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Size() {
  return (
    <div className="flex flex-col gap-8">
      <ButtonGroup size={'sm'}>

Source Code

import {
  FileCsvOutline,
  FileDownloadOutline,
  FilePlusOutline,
  FilePngOutline,
  FileRemoveOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { ButtonGroup, IconButton } from '@ocean-network-express/magenta-ui/react';

export function IconsWithSize() {
  return (
    <div className="flex flex-col gap-8">

With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Source Code

import {
  FileCsvOutline,
  FileDownloadOutline,
  FilePlusOutline,
  FilePngOutline,
  FileRemoveOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { Button, ButtonGroup, IconButton } from '@ocean-network-express/magenta-ui/react';

export function ResponsiveSize() {
  return (
    <div className="flex flex-col gap-8">

Disabled

Disabled state can be enabled by setting disabled prop to true.

Source Code

import { Button, ButtonGroup } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Disabled() {
  return (
    <ButtonGroup disabled>
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
      <Button>Four</Button>
    </ButtonGroup>
  );

Loading

Loading state can be enabled by setting loading prop to true of each button.

Source Code

import {
  FileCsvOutline,
  FileDownloadOutline,
  FilePlusOutline,
  FilePngOutline,
  FileRemoveOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { Button, ButtonGroup, IconButton } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Loading() {
  return (

Split button

ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action.

Source Code

import {
  ChevronDownOutline,
  FileCsvOutline,
  FilePdfOutline,
  FileXmlOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  ButtonGroup,
  IconButton,
  ListItem,
  ListItemText,

Was this page helpful?