import React from 'react';
import { Button } from '@storybook/components';

export default {
  title: 'Core/Layout',
  parameters: {
    layout: 'padded',
  },
};

export const InheritedLayout = () => <Button>a button</Button>;

export const PaddedLayout = () => <Button>a button</Button>;
PaddedLayout.story = {
  parameters: {
    layout: 'padded',
  },
};

export const CenteredLayout = () => <Button>a button</Button>;
CenteredLayout.story = {
  parameters: {
    layout: 'centered',
  },
};

export const CenteredBlockLayout = () => (
  <div>
    <Button>a button</Button>
  </div>
);
CenteredBlockLayout.story = {
  parameters: {
    layout: 'centered',
  },
};

export const FullScreenLayout = () => <Button>a button</Button>;
FullScreenLayout.story = {
  parameters: {
    layout: 'fullscreen',
  },
};

@@ -193,32 +193,40 @@
  = () =%3E %3CButton
+ primary
 %3Ea button%3C/Butto
@@ -263,32 +263,40 @@
  = () =%3E %3CButton
+ primary
 %3Ea button%3C/Butto
@@ -404,32 +404,40 @@
  = () =%3E %3CButton
+ primary
 %3Ea button%3C/Butto
@@ -568,32 +568,40 @@
 div%3E%0A    %3CButton
+ primary
 %3Ea button%3C/Butto
@@ -739,16 +739,24 @@
  %3CButton
+ primary
 %3Ea butto

Use an example component without transparent background.