STYLES

Width

Set an explicit width or protect a component with minimum and maximum bounds across every target.

WIDTH VALUES

Scale values and full width

Numeric values use the Dowe scale. The full token occupies the available parent width.

w:24

w:48

w:96

w:"xl"

w:"full"

MINIMUM WIDTH

Keep controls usable

minW establishes a lower bound while the surrounding layout still decides available space.

dowe
Button minW:40
  "Continue"

CONTAINER VALUES

Use semantic widths

The sm through 7xl values keep the same width across web, iOS, and Android. Use them with w, minW, and maxW.

dowe
Box w:"sm" minW:"md" maxW:{ xs:"full" md:"lg" }
  Text
    "Semantic container width"
Value
Measure
Web token

No data

There are no records to display

RESPONSIVE

Fill available space up to a cap

Combine w:"full" with responsive maxW when a surface should use available mobile space without becoming too wide on larger screens.

dowe
Box w:"full" maxW:{ xs:"full" md:64 } p:6 rounded:"lg"
  Text "Responsive maximum width"

Full up to scale 64 from md.

MAXIMUM WIDTH

Cap width without forcing it

maxW sets an upper bound. Content may remain narrower, while w:"full" grows only until it reaches the limit.

dowe
Card w:"full" maxW:64 p:6
  Title "Bounded card"

Bounded card

This card fills its parent until scale 64.

API

Supported props

Prop
Type
Default

No data

There are no records to display

COMPATIBILITY

Available on styled components

Layout and shell

Box, Section, Flex, Grid, AppBar, Footer, BottomBar, Sidebar, Scaffold, and Drawer.

Navigation

NavMenu, SideNav, RailNav, Tabs, and Stepper.

Content and display

Text, Title, Code, Video, Iframe, Device, Canvas, Table, Divider, Brand, Banner, Alert, Icon, Avatar, AvatarGroup, Badge, Chip, Skeleton, Card, Empty, Marquee, TypeWriter, RichText, Collapsible, Countdown, Map, Audio, Image, Accordion, Carousel, and ChatBox.

Charts

Candlestick, ArcChart, AreaChart, BarChart, LineChart, and PieChart.

Controls and forms

Input, Select, Button, IconButton, ToggleTheme, SelectTheme, Fab, Slider, Dropzone, ComboBox, CsvField, DragDrop, Editor, ImageCropper, Password, Phone, Pin, Textarea, Record, ToggleGroup, Checkbox, Color, Date, DateRange, RadioGroup, and Toggle.

Overlays

Modal, AlertDialog, Tooltip, Toast, Dropdown, and Command.

Svg supports w, but not minW or maxW. Splash, Path, and context-only entries such as Option, fabAction, comboOption, csvColumn, dragGroup, dragItem, tab, step, and region entries do not accept these width props.