Skip to main content

​
Overview

The Button component is a fundamental interactive element that triggers actions when clicked. It supports multiple variants, sizes, and can include icons alongside text labels.
This component is deprecated. Consider using GayaButton for new implementations.

​
Import

import { Button } from '@naturacosmeticos/natds-react'

​
Basic Usage

import React from 'react'
import { Button } from '@naturacosmeticos/natds-react'

function App() {
  return (
    <Button onClick={() => console.log('clicked')}>
      Click Me
    </Button>
  )
}

​
Variants

The Button component supports three visual variants: 
<Button variant="contained" onClick={() => {}}>
  Contained
</Button>

<Button variant="outlined" onClick={() => {}}>
  Outlined
</Button>

<Button variant="text" onClick={() => {}}>
  Text
</Button>

​
Sizes

Buttons come in three different sizes: 
<Button size="semi" onClick={() => {}}>
  Semi
</Button>

<Button size="semiX" onClick={() => {}}>
  Semi X (Default)
</Button>

<Button size="medium" onClick={() => {}}>
  Medium
</Button>

​
With Icons

Buttons can display icons on either side of the text: 
<Button 
  showIcon 
  iconName="outlined-default-mockup" 
  iconPosition="left"
  onClick={() => {}}
>
  Left Icon
</Button>

<Button 
  showIcon 
  iconName="outlined-default-mockup" 
  iconPosition="right"
  onClick={() => {}}
>
  Right Icon
</Button>

​
States

​
Disabled

<Button disabled onClick={() => {}}>
  Disabled Button
</Button>

​
Full Width

<Button fullWidth onClick={() => {}}>
  Full Width Button
</Button>

​
Brand Support

Buttons can be styled for different brands: 
<Button brand="natura" onClick={() => {}}>
  Natura Button
</Button>

<Button brand="avon" onClick={() => {}}>
  Avon Button
</Button>

<Button brand="theBodyShop" onClick={() => {}}>
  The Body Shop Button
</Button>

​
Props

​
children
React.ReactNode
required
The content to display inside the button
​
onClick
() => void
required
Function called when the button is clicked
​
variant
'contained' | 'outlined' | 'text'
default:"contained"
The visual style variant of the button
​
size
'semi' | 'semiX' | 'medium'
default:"semiX"
The size of the button
​
color
'primary' | 'onPrimary' | 'secondary' | 'onSecondary' | 'surfaceInverse' | 'onSurfaceInverse'
Optional color scheme for the button
​
disabled
boolean
default:"false"
Whether the button is disabled
​
fullWidth
boolean
default:"false"
If true, the button will occupy 100% of the container width
​
showIcon
boolean
default:"false"
If true, displays an icon alongside the text
​
iconName
IconName
The name of the icon to display. Required when showIcon is true. See Icon Library
​
iconPosition
'left' | 'right'
default:"right"
The position of the icon relative to the text
​
textTransform
'uppercase' | 'lowercase' | 'capitalize'
default:"uppercase"
Text transformation applied to the button label
​
brand
BrandTypes
Optional brand theme to apply (avon, avon_v2, natura, natura_v2, theBodyShop, consultoriaDeBeleza, casaEestilo)
​
mode
'light' | 'dark'
Optional theme mode
​
type
'button' | 'reset' | 'submit'
default:"button"
The HTML button type attribute
​
className
string
Optional CSS class name to apply custom styles
​
testID
string
Optional ID for testing purposes
​
ariaLabel
string
Accessibility label for screen readers. Use when text is not visible
​
accessibility
ButtonAccessibilityProps
Comprehensive accessibility attributes object including:
  • role: ARIA role
  • tabIndex: Tab order
  • All standard ARIA attributes
​
accessibilitySpan
AriaAttributes
Accessibility attributes for the button’s internal span element

​
Accessibility

​
ARIA Support

The Button component supports comprehensive accessibility features: 
<Button
  onClick={() => {}}
  accessibility={{
    'aria-label': 'Submit form',
    'aria-describedby': 'button-description',
    'aria-pressed': false,
    role: 'button',
    tabIndex: 0
  }}
>
  Submit
</Button>

​
Best Practices

  • Always provide an onClick handler
  • Use ariaLabel when button text doesn’t clearly describe the action
  • Ensure disabled buttons are properly indicated to screen readers
  • Use appropriate button types (submit, reset, button) for form contexts
  • Maintain sufficient color contrast for text and background

​
TypeScript

import { ButtonProps, ButtonSize, ButtonVariant, ButtonColor } from '@naturacosmeticos/natds-react'

const MyButton: React.FC<{ label: string }> = ({ label }) => {
  const handleClick = () => {
    console.log('Button clicked')
  }

  return (
    <Button
      variant="contained"
      size="medium"
      onClick={handleClick}
    >
      {label}
    </Button>
  )
}

​
Related Components

Build docs developers (and LLMs) love

Get started for freeTalk to us