Admin Button

A button component using the admin colors

Props

Prop	Type	Default	Description
children	node		The content of the button.
aria-label	string		An accessible label for the button.
data-testid	string		A data-testid for the button.
loading	bool	false	If true, the button will be in a loading state.
component	elementType	'button'	The component used for the root node. Either a string to use a HTML element or a component.
disabled	bool	false	If true, the button will be disabled.
disableElevation	bool	false	If true, no elevation is used.
disableFocusRipple	bool	false	If true, the keyboard focus ripple will be disabled.
disableRipple	bool		If true, the ripple effect will be disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName.
endIcon	node		Element placed after the children.
fullWidth	bool	false	If true, the button will take up the full width of its container.
href	string		The URL to link to when the button is clicked. If defined, an a element will be used as the root node.
size	'small' \| 'medium' \| 'large'	'medium'	The size of the button. small is equivalent to the dense button styling.
startIcon	node		Element placed before the children.
variant	'contained' \| 'outlined' \| 'text'	'contained'	The variant to use.
adminColor	bool	false	If true, semantic blue color is considered as primary color

Examples

Simple

<AdminButton
  sx={{mr: 4}}
  onClick={() => console.log('clicked primary')}
>
  Primary
</AdminButton>
<AdminButton
  disabled
  onClick={() => console.log('clicked primary')}
>
  Primary
</AdminButton>

Accessibility & Testing

<AdminButton aria-label="primary" data-testid="admin:primary">
  data-testid and aria-label
</AdminButton>

Icon

<AdminButton
  sx={{ mr: 4 }}
  onClick={() => console.log('clicked primary')}
  startIcon={<Trophy />}
>
  Start Icon
</AdminButton>
<AdminButton
  sx={{ mr: 4 }}
  onClick={() => console.log('clicked primary')}
  endIcon={<Trophy />}
>
  End Icon
</AdminButton>

Button with Dot loader

() => {
  const [loading, setLoading] = React.useState(false);
  const onClick = () => {
    setLoading(!loading);
  };
  return (
    <AdminButton loading={loading} onClick={onClick}>
      Click Me
    </AdminButton>
  );
};