Using Spor Components
Spor components are designed to be flexible building blocks that can be reused across different products, flows, and contexts. When using a component, choose the properties that best match the purpose and context rather than creating custom variations.
Choose the right component
Start by choosing the component that best fits your use case. Check the component’s documentation for its intended purpose, available properties, and any usage guidelines. Avoid using a component for something it was not designed to do.
Use the available properties
Most Spor components offer properties that allow you to adapt them to different contexts. Common properties include:
- Size — Choose the size that fits the context and hierarchy of the interface.
- Variant — Use variants to communicate different purposes or levels of emphasis, such as primary, secondary, tertiary, core, ghost or floating.
Additionally, most components can receive any type of layout property, such as width, height, padding, margin etc to customize the component to fit the context of use.
Try it yourself!
A Button is a frequently used component, but is used in many different contexts. Spor therefore offers different sizes and variants of it.
Edit the code in the codeblock in the following ways and take a look at how it affects the Button:
- Change the
variant-property to be “secondary“, “tertiary“, “ghost”, or “floating“. - Change the
size-property to be “sm“. - Remove the
variantandsizeproperties to see what the default values of these properties are.
<Button variant="primary" size="md"> I am a button </Button>
Next: Start using Spor Tokens
Next step is to learn about using Design Tokens to customize the layout of the components you use.