Button

Basic example

import { Button } from '@streamelements/frontend-ui';
...
<Button>Contained</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="ghost">Ghost</Button>

Colors

Disabled

Icon button

import { Button } from '@streamelements/frontend-ui';
import { MenuRounded } from '@streamelements/frontend-icons';
...
<Button iconButton>
  <MenuRounded />
</Button>
<Button iconButton variant="outlined">
  <MenuRounded />
</Button>
<Button iconButton variant="ghost">
  <MenuRounded />
</Button>

Density

import { Button } from '@streamelements/frontend-ui';
import { MenuRounded } from '@streamelements/frontend-icons';
...
<Button>
  density: default
</Button>

<Button density="compact">
  density: compact
</Button>

<Button density="comfortable">
  density: comfortable
</Button>

Props

In addition to the default Button element HTML props, the following props are available:

Property	Value	Default	Description
variant	'contained' | 'outlined' | 'ghost'	'contained	The appearance of the button.
density	'default' | 'compact' | 'comfortable'	'default	Density of the button.
iconButton	Boolean	false	If true, it will render a button container with fixed width and height.
color	'primary' | 'success' | 'attention' | 'error' | 'neutral'	'primary'	Renders a button in different color than default.