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

Property	Description
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

For details on how to configure parameters in rich-text options, see Typography and fonts.