File
File provides a user interface for file selection, uploading, and management. It offers a clear visual representation of files with customizable styling to match the design system.
Style settings
Loader
Background color
Select the background color for the file component, such as "Background/Primary" for consistent styling.
Hover color
Choose the color that appears when users hover over the component, such as "Brand/Hover light" for interactive feedback.
Icon color
Select the color for the file icon, such as "Text/Primary" for clear visibility.
Format label (background)
Choose the background color for file format labels, such as "Brand/Primary" to highlight file types.
Format label (text)
Select the text color for format labels, such as "Text/Light" for readability against the label background.
Frame
Rounding
Adjust the corner roundness of the file component container.
Display border
Toggle between "Yes" or "No" to add or remove borders around the file component.
Border color
Select the color for the border when enabled, such as "Brand/Border" for visual definition.
Thickness
Adjust the slider to control the thickness of the border around the file component.
Effects
Loader shadow
Add and configure shadow effects for a loader in File:
Click the "+" icon to add shadow effects.
Select from shadow styles: None, Soft, Regular, or Retro.
Typography settings
Customize File appearance using rich-text settings. These changes apply only to the Loader within the File element and do not affect other text elements.
You can modify the following properties:
Font
Style
Size
Line spacing
Color
Last updated
Was this helpful?