The Logo component displays the brand logo from your current theme. It supports different colors, sizes, and model variants to fit various use cases throughout your application.
import { Logo } from '@naturacosmeticos/natds-web';
Basic Logo
import { Logo } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Logo />
);
}
Logo with Size
import { Logo } from '@naturacosmeticos/natds-web';
function SizeExamples() {
return (
<>
<Logo size="medium" />
<Logo size="large" />
<Logo size="veryHuge" />
</>
);
}
Logo with Color
import { Logo } from '@naturacosmeticos/natds-web';
function ColorExamples() {
return (
<>
<Logo color="neutral" />
<Logo color="primary" />
<Logo color="secondary" />
</>
);
}
Logo Models
The Logo component supports different model variants (typically different logo styles):
import { Logo } from '@naturacosmeticos/natds-web';
function ModelExamples() {
return (
<>
<Logo model="a" />
<Logo model="b" />
</>
);
}
import { Logo } from '@naturacosmeticos/natds-web';
function AllSizes() {
return (
<>
<Logo size="medium" />
<Logo size="mediumX" />
<Logo size="large" />
<Logo size="largeX" />
<Logo size="largeXX" />
<Logo size="largeXXX" />
<Logo size="huge" />
<Logo size="hugeX" />
<Logo size="hugeXX" />
<Logo size="hugeXXX" />
<Logo size="veryHuge" />
</>
);
}
medium, mediumX, large, largeX, largeXX, largeXXX, huge, hugeX, hugeXX, hugeXXX, veryHuge
Logo color options depend on your theme configuration:
import { Logo } from '@naturacosmeticos/natds-web';
function ColorExamples() {
return (
<>
<Logo color="neutral" />
<Logo color="primary" />
<Logo color="secondary" />
<Logo color="highlight" />
<Logo color="surface" />
</>
);
}
neutral, primary, secondary, highlight, surface
ILogoProps
color
'neutral' | 'primary' | 'secondary' | 'highlight' | 'surface'
default:"neutral"
The logo color variant from the theme.
size
LogoSizes
default:"veryHuge"
The size of the logo. Available sizes: medium, mediumX, large, largeX, largeXX, largeXXX, huge, hugeX, hugeXX, hugeXXX, veryHuge.
The logo model variant. Different models typically represent different logo styles or orientations.
The ARIA label for the logo. Used for screen readers to describe the logo.
Common Use Cases
import { Logo } from '@naturacosmeticos/natds-web';
function Header() {
return (
<header style={{ padding: '16px', background: '#fff' }}>
<Logo size="large" color="neutral" arialabel="Company logo" />
</header>
);
}
import { Logo } from '@naturacosmeticos/natds-web';
function Footer() {
return (
<footer style={{ padding: '32px', background: '#333' }}>
<Logo size="medium" color="surface" arialabel="Company logo" />
</footer>
);
}
Loading Screen
import { Logo } from '@naturacosmeticos/natds-web';
function LoadingScreen() {
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh'
}}>
<Logo size="veryHuge" color="primary" arialabel="Loading" />
</div>
);
}
Navigation Bar
import { Logo } from '@naturacosmeticos/natds-web';
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav style={{
display: 'flex',
alignItems: 'center',
padding: '12px 24px',
background: '#fff',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}}>
<Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
<Logo size="large" color="primary" arialabel="Home" />
</Link>
{/* Navigation items */}
</nav>
);
}
Accessibility
The Logo component renders as an SVG with proper ARIA attributes:
import { Logo } from '@naturacosmeticos/natds-web';
function AccessibleLogo() {
return (
<Logo
size="large"
color="neutral"
arialabel="Natura & Co brand logo"
/>
);
}
role="img" attribute for screen readersaria-label for describing the logo
Theme Integration
The Logo component pulls brand assets from the current theme:
// The logo SVG is provided by the theme
// theme.asset.brand[color][model].file
