@malomohq/suede-button

Demo - Text Button

Demo - Outlined Button

Demo - Contained Button

Getting Started

npm install @malomohq/suede-button

# or

yarn install @malomohq/suede-button

@malomohq/suede-button requires the react and styled-components packages as peer dependencies.

Usage

Button.Text

import Button from '@malomohq/suede-button';

<Button.Text>
  Click Here
</Button.Text>

Details

• Element type - button
• Component type - Structural
• Allows root override - Yes

Props

This component will accept any prop supported by the button element type.

Button.Outlined

import Button from '@malomohq/suede-button';

<Button.Outlined>
  Click Here
</Button.Outlined>

Details

• Element type - button
• Component type - Structural
• Allows root override - Yes

Props

This component will accept any prop supported by the button element type.

Button.Contained

import Button from '@malomohq/suede-button';

<Button.Contained>
  Click Here
</Button.Contained>

Details

• Element type - button
• Component type - Structural
• Allows root override - Yes

Props

This component will accept any prop supported by the button element type.

Button.Icon

import Button from '@malomohq/suede-button';

<Button.Contained>
  <Button.Icon>shopping_cart</Button.Icon>
  Click Here
</Button.Contained>

Details

• Element type - i
• Component type - Structural
• Allows root override - Yes

Props

This component will accept any prop supported by the i element type.

Custom Types

To provide a custom root DOM node use the Root component exposed on each button type. The Root component will apply the styles of that button type to the component you provide.

Example

<Button.Text.Root>
  <Link to="/home">Home</Link>
</Button.Text.Root>

See Also

• @malomohq/suede-elevation

Further Reading

• Material Design - Buttons