Przycisk

Przycisk to rzecz, którą się klika, żeby coś się stało. button() renderuje prawdziwy <button> z type="button", więc wrzucenie go do formularza nie wyśle go przez przypadek.

Podstawowy przycisk

Domyślny jest pełny, primary, średni. Dzieci to etykieta; wszystko inne to props.

stack({ direction: 'row', gap: 'md' },
  button('Jeden'),
  button('Dwa'),
  button('Trzy'),
)

Warianty

Pięć stopni wyrazistości, od jedynego wezwania do działania na stronie po coś, co czyta się jak odnośnik.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'solid' }, 'Solid'),
  button({ variant: 'soft' }, 'Soft'),
  button({ variant: 'outline' }, 'Outline'),
  button({ variant: 'ghost' }, 'Ghost'),
  button({ variant: 'link' }, 'Link'),
)

Kolory

Każdy komponent objęty motywem czerpie z tych samych pięciu palet, więc przycisk color: 'danger' i alert color: 'danger' zgadzają się ze sobą, choć żaden nie wie o drugim.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ color: 'primary' }, 'Primary'),
  button({ color: 'neutral' }, 'Neutral'),
  button({ color: 'success' }, 'Success'),
  button({ color: 'warning' }, 'Warning'),
  button({ color: 'danger' }, 'Danger'),
)

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'soft', color: 'primary' }, 'Primary'),
  button({ variant: 'soft', color: 'neutral' }, 'Neutral'),
  button({ variant: 'soft', color: 'success' }, 'Success'),
  button({ variant: 'soft', color: 'warning' }, 'Warning'),
  button({ variant: 'soft', color: 'danger' }, 'Danger'),
)

Rozmiary

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  button({ size: 'sm' }, 'Mały'),
  button({ size: 'md' }, 'Średni'),
  button({ size: 'lg' }, 'Duży'),
)

Ikony

Podaj dowolne znaczniki SVG jako startIcon albo endIcon. Ikony wymiarowane są w em, więc skalują się razem z przyciskiem, zamiast potrzebować własnego rozmiaru.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Nowa strona'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Dalej'),
)

Przycisk-ikona

iconButton() to kwadratowy przycisk mieszczący jedną ikonę. Jego label jest wymagana — staje się dostępną nazwą, której sama ikona nie potrafi dać, oraz podpowiedzią po najechaniu.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Dodaj', icon: icon('plus') }),
  iconButton({ label: 'Edytuj', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Usuń', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

Ładowanie i wyłączenie

loading podstawia wirujący wskaźnik i ustawia aria-busy, zostawiając etykietę na miejscu, żeby przycisk nie zmienił szerokości w trakcie akcji.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Zapisywanie'),
  button({ variant: 'outline', loading: true }, 'Sprawdzanie'),
  button({ disabled: true }, 'Wyłączony'),
  button({ variant: 'soft', disabled: true }, 'Wyłączony'),
)

Odnośniki

Daj przyciskowi href, a wyrenderuje zamiast tego <a> — właściwy element dla czegoś, co nawiguje. Kotwice nie mają stanu wyłączenia, więc disabled staje się aria-disabled i usuwa je z kolejności tabulacji.

Przeczytaj dokumentację Komponenty Zwykły odnośnik

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/docs' }, 'Przeczytaj dokumentację'),
  button({ href: '/docs/ui', variant: 'outline' }, 'Komponenty'),
  button({ href: '/docs', variant: 'link' }, 'Zwykły odnośnik'),
)

Pełna szerokość

button({ block: true, size: 'lg' }, 'Wdróż witrynę')

Propsy

Wszystko, czego tu nie ma, przechodzi na renderowany element jako atrybut — id, data-*, onclick, popovertarget i tak dalej.

Prop	Typ	Domyślnie	Opis
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Ile wyrazistości niesie przycisk.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Z której palety czerpać.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Wysokość, odstęp wewnętrzny i rozmiar etykiety.
`href`	`string`	—	Renderuje <a> zamiast <button>.
`startIcon`	`string`	—	Znaczniki umieszczone przed etykietą.
`endIcon`	`string`	—	Znaczniki umieszczone po etykiecie.
`loading`	`boolean`	`false`	Pokazuje wirujący wskaźnik i ustawia aria-busy.
`disabled`	`boolean`	`false`	Wyłącza przycisk albo oznacza odnośnik jako aria-disabled.
`block`	`boolean`	`false`	Rozciąga na pełną szerokość kontenera.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Tylko dla postaci <button>.

iconButton() przyjmuje te same propsy plus wymaganą label i icon.