Description
The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.
Variants and sizes
There should never be more than one primary button in a given context; secondary and tertiary button variants do not have this constraint. Generally speaking, a button should not be used when a link would suffice.
The Button component comes in different sizes.
For variant primary, the recommended sizes are default and large.
<Button text="Default button" on_click={() => { console.log('on_click') }} /> <Button text="Large button" on_click={() => { console.log('on_click') }} size="large" left /> <Button text="Default button icon" on_click={() => { console.log('on_click') }} icon="chevron_right" left /> <Button text="Large button icon" on_click={() => { console.log('on_click') }} size="large" icon="chevron_right" left />
For variant secondary, the recommended sizes are default and large.
<Button text="Default button" on_click={() => { console.log('on_click') }} variant="secondary" /> <Button text="Large button" on_click={() => { console.log('on_click') }} size="large" variant="secondary" left /> <Button text="Default button icon" on_click={() => { console.log('on_click') }} icon="chevron_right" variant="secondary" left /> <Button text="Large button icon" on_click={() => { console.log('on_click') }} size="large" icon="chevron_right" variant="secondary" left />
For variant tertiary, the recommended size is default. A variant with icon_position="top" is also available for use.
It is not recommended to use the tertiary button without an icon. Looking for a similar variant without an icon? You might want to check out Anchor instead.
<Button text="Default button" on_click={() => { console.log('on_click') }} icon="chevron_right" variant="tertiary" /> <Button text="Button large" on_click={() => { console.log('on_click') }} icon="chevron_right" variant="tertiary" size="large" left /> <Button text="Button text" on_click={() => { console.log('on_click') }} icon="bell" icon_position="top" variant="tertiary" left />
For variant signal, the recommended sizes are default and large.
<Button text="Default button" on_click={() => { console.log('on_click') }} variant="signal" /> <Button text="Large button" on_click={() => { console.log('on_click') }} size="large" variant="signal" left /> <Button text="Default button icon" on_click={() => { console.log('on_click') }} icon="chevron_right" variant="signal" left /> <Button text="Large button icon" on_click={() => { console.log('on_click') }} size="large" icon="chevron_right" variant="signal" left />
Icon buttons come in all sizes.
<Button title="Small sized button with add icon" icon="add" size="small" /> <Button title="Medium sized button with add icon (default)" icon="add" size="medium" left /> <Button title="Default sized button with add icon (not default)" icon="add" size="default" left /> <Button title="Large sized button with add icon" icon="add" size="large" left />