Elevation

A shadow shows height: the higher an element sits above the page, the closer it is to the user and the softer and wider its shadow. A dropdown list lies above a form, and the form lies above the background, so a panel's shadow is more visible than a card's.

This is a setting separate from shape: square controls only the corner radius and never affects the shadow. Two props control the shadow: flat and elevation.

Showcase

The switch and the scale act on all groups at once: the shadow is configured the same way on the card, the button, the tooltip and floating panels.

flat: remove the shadow

A boolean prop, most often set once for the whole app. A layout without shadows is a common requirement, and there is no need to repeat it on every call:

import { createSUI } from '@smalt-ui/core'

app.use(createSUI({ defaults: { global: { flat: true } } }))

With shadow

flat

<template>
  <SButton
    variant="primary"
    flat
  >
    No shadow
  </SButton>
  <SCard
    variant="elevated"
    flat
  >
    No shadow
  </SCard>
</template>

elevation: set the level

A number from 0 to 5 on the Material Design scale. 0 is the same as flat; higher is more visible.

0

1

2

3

4

5

<template>
  <SCard :elevation="3">Raised card</SCard>
</template>

Priority

elevation overrides flat, not the other way around. The order follows practice: flat usually comes from global defaults, while elevation is written locally in place; otherwise there would be no way to bring the shadow back on a single card.

<!-- with global: { flat: true } this card still has a shadow -->
<SCard :elevation="2">Highlighted card</SCard>

Default levels

Level	Who
3	floating panels: lists, menus, popovers, calendars, toasts
2	tooltip
1	button (filled variants), SCard variant="elevated", toolbar
—	everything else: toggles, inputs and navigation have no shadow at all

On hover a button rises one step, also with an explicit elevation: level 3 becomes 4 under the pointer. This keeps the material physics intact.

Modal windows have no such prop

SDialog, SAlertDialog and SDrawer do not turn off their shadow. It is not decoration there: the window lies over a dimmed backdrop, and the shadow is the only thing that separates its edge from the backdrop.

For the same reason the shadow of the SSlider thumb is not configurable: it is part of its physical metaphor, not surface styling.

Tokens and fine-tuning

Levels are emitted as the --s-elevation-0…5 tokens and can be overridden like any other token, including through createTheme. Changing a token changes the shadow everywhere that level is used.

To change the shadow of one component without touching props, use these variables:

Variable	What it sets
--s-surface-elevation	all floating panels (shared, they live in body)
--s-button-elevation / --s-button-elevation-hover	button at rest and under the pointer
--s-card-elevation	card
--s-toolbar-elevation	toolbar
--s-tooltip-elevation	tooltip

/* softer shadows on all dropdown panels of the app */
:root {
  --s-surface-elevation: var(--s-elevation-2);
}