Skip to main content

States

Handle loading, error, disabled, and selected states.

Loading State​

Show a loading indicator:

Live Editor
function LoadingExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{ name: 'Loading...', author: 'Please wait' }}
      loading={true}
    />
  );
}
Result
Loading...

Error State​

Display an error state:

Live Editor
function ErrorExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{ name: 'Error', author: 'Failed to load' }}
      error={true}
    />
  );
}
Result
Loading...

Disabled State​

Disable interaction:

Live Editor
function DisabledExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{ name: 'Disabled', author: 'Cannot interact' }}
      disabled={true}
    />
  );
}
Result
Loading...

Selected State​

Highlight selected disks:

Live Editor
function SelectedExample() {
  const [selected, setSelected] = React.useState(false);

  return (
    <FloppyDisk
      size="medium"
      label={{ name: selected ? 'Selected' : 'Click to select', author: 'Interactive' }}
      selected={selected}
      onClick={() => setSelected(!selected)}
    />
  );
}
Result
Loading...

Combined States​

Live Editor
function CombinedStatesExample() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <FloppyDisk size="small" label={{ name: 'Normal' }} />
      <FloppyDisk size="small" label={{ name: 'Loading' }} loading />
      <FloppyDisk size="small" label={{ name: 'Error' }} error />
      <FloppyDisk size="small" label={{ name: 'Disabled' }} disabled />
      <FloppyDisk size="small" label={{ name: 'Selected' }} selected />
    </div>
  );
}
Result
Loading...