Button • shinyMaterialUI

This page is an adaptation of the related MUI Material UI documentation page.

Buttons allow users to take actions, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Modal windows
Forms
Cards
Toolbars

Load R packages

library(shinyMaterialUI)
library(shiny)

Basic button

The Button comes with three variants: text (default), contained, and outlined.

Code

Stack(
  spacing = 2, 
  direction = "row",
  Button(variant = "text", "Text"),
  Button(variant = "contained", "Contained"),
  Button(variant = "outlined", "Outlined")
)

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

Text button

Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content.

Code

Stack(
  direction = "row", 
  spacing = 2,
  Button("Primary"),
  Button(disabled = TRUE, "Disabled"),
  Button(href = "#text-buttons", "Link")
)

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

export default function TextButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button>Primary</Button>
      <Button disabled>Disabled</Button>
      <Button href="#text-buttons">Link</Button>
    </Stack>
  );
}

Contained button

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

Code

Stack(
  direction = "row", 
  spacing = 2,
  Button(variant = "contained", "Contained"),
  Button(variant = "contained", disabled = TRUE, "Disabled"),
  Button(variant = "contained", href = "#contained-buttons", "Link")
)

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

export default function ContainedButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="contained">Contained</Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained" href="#contained-buttons">
        Link
      </Button>
    </Stack>
  );
}

You can remove the elevation with the disableElevation prop.

Code

Button(
  variant = "contained", 
  disableElevation = TRUE, 
  "Disable elevation"
)

import * as React from 'react';
import Button from '@mui/material/Button';

export default function DisableElevation() {
  return (
    <Button variant="contained" disableElevation>
      Disable elevation
    </Button>
  );
}

Handling clicks

All components accept an onClick handler that is applied to the root DOM element.

Code

library(shiny)
library(shinyMaterialUI)

# In Shiny, click handling is typically done through event observers
ui <- shinyMaterialUIPage(
  Button.shinyInput(
    inputId = "clickButton",
    "Click me"
  )
)

server <- function(input, output, session) {
  observeEvent(input$clickButton, {
    showNotification("Button clicked!")
  })
}

shinyApp(ui, server)

<Button
  onClick={() => {
    alert('clicked');
  }}
>
  Click me
</Button>

Color

Code

Stack(
  direction = "row", 
  spacing = 2,
  Button(color = "secondary", "Secondary"),
  Button(
    variant = "contained", 
    color = "success", 
    "Success"
  ),
  Button(
    variant = "outlined", 
    color = "error", 
    "Error"
  )
)

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function ColorButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button color="secondary">Secondary</Button>
      <Button variant="contained" color="success">
        Success
      </Button>
      <Button variant="outlined" color="error">
        Error
      </Button>
    </Stack>
  );
}

Sizes

For larger or smaller buttons, use the size prop.

Code

library(shiny)
library(shinyMaterialUI)

Box(
  sx = list('& button' = list(m = 1)),
  div(
    Button(size = "small", "Small"),
    Button(size = "medium", "Medium"),
    Button(size = "large", "Large")
  ),
  div(
    Button(
      variant = "outlined", 
      size = "small", 
      "Small"
    ),
    Button(
      variant = "outlined", 
      size = "medium", 
      "Medium"
    ),
    Button(
      variant = "outlined", 
      size = "large", 
      "Large"
    )
  ),
  div(
    Button(
      variant = "contained", 
      size = "small", 
      "Small"
    ),
    Button(
      variant = "contained", 
      size = "medium", 
      "Medium"
    ),
    Button(
      variant = "contained", 
      size = "large", 
      "Large"
    )
  )
)

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

export default function ButtonSizes() {
  return (
    <Box sx={{ '& button': { m: 1 } }}>
      <div>
        <Button size="small">Small</Button>
        <Button size="medium">Medium</Button>
        <Button size="large">Large</Button>
      </div>
      <div>
        <Button variant="outlined" size="small">
          Small
        </Button>
        <Button variant="outlined" size="medium">
          Medium
        </Button>
        <Button variant="outlined" size="large">
          Large
        </Button>
      </div>
      <div>
        <Button variant="contained" size="small">
          Small
        </Button>
        <Button variant="contained" size="medium">
          Medium
        </Button>
        <Button variant="contained" size="large">
          Large
        </Button>
      </div>
    </Box>
  );
}

Buttons with icons and label

Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.

Code

Stack(
  direction = "row", 
  spacing = 2,
  Button(
    variant = "outlined", 
    startIcon = shiny::icon("trash"), 
    "Delete"
  ),
  Button(
    variant = "contained", 
    endIcon = shiny::icon("paper-plane"), 
    "Send"
  )
)

import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';

export default function IconLabelButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="outlined" startIcon={<DeleteIcon />}>
        Delete
      </Button>
      <Button variant="contained" endIcon={<SendIcon />}>
        Send
      </Button>
    </Stack>
  );
}

Icon button

Icon buttons are commonly found in app bars and toolbars.

Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

Code

Stack(
  direction = "row", 
  spacing = 1,
  IconButton(
    ariaLabel = "delete", 
    shiny::icon("trash")
  ),
  IconButton(
    ariaLabel = "delete", 
    disabled = TRUE, 
    color = "primary", 
    shiny::icon("paper-plane")
  ),
  IconButton(
    color = "secondary", 
    ariaLabel = "add an alarm", 
    shiny::icon("bell")
  ),
  IconButton(
    color = "primary", 
    ariaLabel = "add to shopping cart", 
    shiny::icon("shopping-cart")
  )
)

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import AlarmIcon from '@mui/icons-material/Alarm';
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';

export default function IconButtons() {
  return (
    <Stack direction="row" spacing={1}>
      <IconButton aria-label="delete">
        <DeleteIcon />
      </IconButton>
      <IconButton aria-label="delete" disabled color="primary">
        <DeleteIcon />
      </IconButton>
      <IconButton color="secondary" aria-label="add an alarm">
        <AlarmIcon />
      </IconButton>
      <IconButton color="primary" aria-label="add to shopping cart">
        <AddShoppingCartIcon />
      </IconButton>
    </Stack>
  );
}

Sizes

For larger or smaller icon buttons, use the size prop.

Code

library(shiny)
library(shinyMaterialUI)

Stack(
  direction = "row", 
  spacing = 1, 
  sx = list(alignItems = 'center'),
  IconButton(
    ariaLabel = "delete", 
    size = "small", 
    shiny::icon("trash"), 
    class = "inherit"
  ),
  IconButton(
    ariaLabel = "delete", 
    size = "small", 
    shiny::icon("trash"), 
    class = "small"
  ),
  IconButton(
    ariaLabel = "delete", 
    size = "large", 
    shiny::icon("trash")
  ),
  IconButton(
    ariaLabel = "delete", 
    size = "large", 
    shiny::icon("trash"), 
    class = "inherit"
  )
)

import * as React from 'react';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';

export default function IconButtonSizes() {
  return (
    <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
      <IconButton aria-label="delete" size="small">
        <DeleteIcon fontSize="inherit" />
      </IconButton>
      <IconButton aria-label="delete" size="small">
        <DeleteIcon fontSize="small" />
      </IconButton>
      <IconButton aria-label="delete" size="large">
        <DeleteIcon />
      </IconButton>
      <IconButton aria-label="delete" size="large">
        <DeleteIcon fontSize="inherit" />
      </IconButton>
    </Stack>
  );
}

Colors

Use color prop to apply theme color palette to component.

Code

Stack(
  direction = "row", 
  spacing = 1,
  IconButton(
    ariaLabel = "fingerprint", 
    color = "secondary", 
    shiny::icon("fingerprint")
  ),
  IconButton(
    ariaLabel = "fingerprint", 
    color = "success", 
    shiny::icon("fingerprint")
  )
)

import * as React from 'react';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import Fingerprint from '@mui/icons-material/Fingerprint';

export default function IconButtonColors() {
  return (
    <Stack direction="row" spacing={1}>
      <IconButton aria-label="fingerprint" color="secondary">
        <Fingerprint />
      </IconButton>
      <IconButton aria-label="fingerprint" color="success">
        <Fingerprint />
      </IconButton>
    </Stack>
  );
}

Loading

Starting from v6.4.0, use loading prop to set icon buttons in a loading state and disable interactions.

Code

library(shiny)

ui <- shinyMaterialUIPage(
  IconButton.shinyInput(
    inputId = "loadingButton",
    shiny::icon("shopping-cart")
  )
)

server <- function(input, output, session) {
  observeEvent(input$loadingButton, {
    # Simulate loading state
    updateIconButton.shinyInput(
      session, 
      inputId = "loadingButton", 
      loading = TRUE
    )
    print("Test")
    
    # Reset after 2 seconds
    Sys.sleep(2)
    updateIconButton.shinyInput(
      session, 
      inputId = "loadingButton", 
      loading = FALSE
    )
    print("Test 2")
  })
}

shinyApp(ui, server)

import * as React from 'react';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

export default function LoadingIconButton() {
  const [loading, setLoading] = React.useState(false);
  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setLoading(false);
    }, 2000);
    return () => clearTimeout(timeout);
  });
  return (
    <Tooltip title="Click to see loading">
      <IconButton onClick={() => setLoading(true)} loading={loading}>
        <ShoppingCartIcon />
      </IconButton>
    </Tooltip>
  );
}

Badge

You can use the Badge component to add a badge to an IconButton.

Code

IconButton(
  shiny::icon("shopping-cart", class = "small"),
  Badge(
    badgeContent = 2, 
    color = "primary", 
    overlap = "circular"
  )
)

<IconButton>
  <ShoppingCartIcon fontSize="small" />
  <CartBadge badgeContent={2} color="primary" overlap="circular" />
</IconButton>