The ButtonOrLink
component is a versatile element that can be rendered as either a button or a link depending on the properties provided.
To use the ButtonOrLink
component, it must be wrapped in a ThemeProvider
component with a specified theme.
Here is a basic example:
import { ThemeProvider } from "styled-components";
import ButtonOrLink from "./components/ButtonOrLink";
import defaultTheme from "./theme";
<ThemeProvider theme={defaultTheme}>
<ButtonOrLink>Button Text</ButtonOrLink>
</ThemeProvider>;
This will render a default button with the text "Button Text".
If you provide a to prop, ButtonOrLink will render as a link:
<ThemeProvider theme={defaultTheme}>
<ButtonOrLink to="https://example.com">Link Text</ButtonOrLink>
</ThemeProvider>
This will render a link with the text "Link Text", which points to "https://example.com".
ButtonOrLink
accepts the following props:
-
to
: A string specifying the URL to which the link should point. If provided,ButtonOrLink
will render as a link; otherwise, it will render as a button. -
primary
,secondary
,tertiary
: Boolean props to specify the button type. Only one should be provided. -
large
: A boolean prop to specify whether the button should be large. -
onClick
: A function to be called when the button is clicked. -
children
: The content to be rendered within the button or link.
The Typography component is used to render text with specific styling based on the theme.
Like ButtonOrLink
, Typography
must also be wrapped in a ThemeProvider
component.
Here is a basic example of how to use the Typography
component:
import { ThemeProvider } from "styled-components";
import Typography from "./components/Typography";
import defaultTheme from "./theme";
<ThemeProvider theme={defaultTheme}>
<Typography variant="h1">Heading 1</Typography>
</ThemeProvider>;
This will render an h1 heading with the text "Heading 1".
Typography
accepts the following props:
-
variant
: The style variant of the text. It can be one ofh1
,h2
,h3
,h4
,h5
,h6
,body1
,body2
,caption
,button
,subtitle1
,subtitle2
,overline
. -
component
: The HTML element to use to render the text. If not provided, it defaults to the element corresponding to the variant prop. For example, ifvariant="h1"
, the component will render anh1
element by default. -
children
: The text to be rendered within the typography component.
Note: Remember to replace the paths in the import statements with the actual paths to the components and theme in your project.