Skip to main content

<Button>

Strato Admin provides a wrapper around Cloudscape's Button component, ensuring consistent styling across the framework.

Props​

PropTypeDefaultDescription

Primary Button​

...

Used for the main action on a page.

Primary Button

Normal Button​

Used for secondary actions like "Cancel" or "Go Back".

Normal Button

Usage​

You can use the Button component from strato-cloudscape.

import { Button } from '@strato-admin/cloudscape';

<Button variant="primary">Save Changes</Button>;

Storybook Examples​

Here is the source code for the examples shown above:

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      options: ['primary', 'normal', 'link', 'icon', 'inline-icon'],
      control: { type: 'select' },
    },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Save Changes',
  },
};

export const Normal: Story = {
  args: {
    variant: 'normal',
    children: 'Cancel',
  },
};