// Validation errors block the action.
<Button variant="primary" error disabled>
  Submit Form
</Button>

// Icon-only buttons with different sizes.
// leftIcon takes a ReactNode: a gloss-icons <Icon>, or an SVG of your own.
<Button variant="primary" size="sm" iconOnly leftIcon={<Icon name="plus" size="sm" />} />
<Button variant="primary" iconOnly leftIcon={<Icon name="plus" size="sm" />} />
<Button variant="primary" size="lg" iconOnly leftIcon={<Icon name="plus" size="md" />} />

// Different variants
<Button variant="secondary" iconOnly leftIcon={<SettingsIcon />} />
<Button variant="ghost" iconOnly leftIcon={<Icon name="more-vertical" size="sm" />} />

<ButtonGroup>
  <Button variant="secondary">Day</Button>
  <Button variant="secondary">Week</Button>
  <Button variant="secondary">Month</Button>
  <Button variant="secondary">Year</Button>
</ButtonGroup>

<ButtonGroup attached>
  <Button variant="secondary">Left</Button>
  <Button variant="secondary">Center</Button>
  <Button variant="secondary">Right</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical" attached>
  <Button variant="secondary" leftIcon={<ListIcon />}>List View</Button>
  <Button variant="secondary" leftIcon={<GridIcon />}>Grid View</Button>
  <Button variant="secondary" leftIcon={<ColumnsIcon />}>Column View</Button>
</ButtonGroup>

<ButtonGroup fullWidth attached>
  <Button variant="secondary">Cancel</Button>
  <Button variant="primary">Confirm</Button>
</ButtonGroup>

<SplitButton
  onClick={() => handleSave()}
  menuItems={[
    { label: 'Save as draft', onClick: () => handleSaveDraft() },
    { label: 'Save and publish', onClick: () => handlePublish() },
    { label: 'Save as template', onClick: () => handleTemplate() },
  ]}
>
  Save
</SplitButton>

<SplitButton
  leftIcon={<DownloadIcon />}
  onClick={() => handleDownload()}
  menuItems={[
    { label: 'Download PDF', onClick: handlePDF, icon: <FileIcon /> },
    { label: 'Download CSV', onClick: handleCSV, icon: <FileIcon /> },
    { divider: true, label: 'Email report', onClick: handleEmail, icon: <MailIcon /> },
  ]}
>
  Download
</SplitButton>

// Primary variant, small size
<SplitButton variant="primary" size="sm" menuItems={[...]}>
  Primary Small
</SplitButton>

// Secondary variant, default size
<SplitButton variant="secondary" menuItems={[...]}>
  Secondary Default
</SplitButton>

// Ghost variant, large size
<SplitButton variant="ghost" size="lg" menuItems={[...]}>
  Ghost Large
</SplitButton>